body {
            background: #f6f7fb;
        }
.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 0.5;
}

.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {
  color: var(--bs-secondary-color);
  opacity: 0.5;
}

.form-control::-moz-placeholder,
textarea.form-control::-moz-placeholder {
  color: var(--bs-secondary-color);
  opacity: 0.5;
}

.form-control:-ms-input-placeholder,
textarea.form-control:-ms-input-placeholder {
  color: var(--bs-secondary-color);
  opacity: 0.5;
}

.form-control::-ms-input-placeholder,
textarea.form-control::-ms-input-placeholder {
  color: var(--bs-secondary-color);
  opacity: 0.5;
}
        .navbar {
            background: #ffffff;
        }

        .navbar-brand {
            letter-spacing: -0.02em;
        }

        .brand-icon {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            background: #5b5cf6;
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .card-soft {
            border: 0;
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
        }

        .btn-brand {
            background: #5b5cf6;
            border-color: #5b5cf6;
            color: #fff;
        }

        .btn-brand:hover {
            background: #4338ca;
            border-color: #4338ca;
            color: #fff;
        }

        .top-link {
            color: #334155;
            text-decoration: none;
        }

        .top-link:hover {
            color: #111827;
        }

        .link-muted {
            color: #64748b;
            word-break: break-all;
        }

        .small-label {
            font-size: 13px;
            color: #64748b;
            margin-bottom: 4px;
        }

        .copy-input {
            background: #f8fafc;
        }

        .qr-box,
        .qr-preview {
            min-height: 280px;
            border: 1px dashed #cbd5e1;
            border-radius: 20px;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .qr-box img,
        .qr-preview img {
            max-width: 260px;
            width: 100%;
            height: auto;
            border-radius: 12px;
        }

        .app-footer {
            background: #0f172a;
            color: rgba(255,255,255,.72);
            margin-top: 0px;
            padding: 42px 0;
        }

        .app-footer a {
            color: rgba(255,255,255,.72);
            text-decoration: none;
        }

        .app-footer a:hover {
            color: #ffffff;
        }

        .footer-brand-icon {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            background: #5b5cf6;
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .link-row {
            word-break: break-all;
        }
.hero{padding:30px 0}.landing-menu-card{border:0;border-radius:24px;background:#fff;box-shadow:0 20px 60px rgba(15,23,42,0.08);overflow:hidden}.landing-menu-head{border-radius:24px 24px 0 0;padding:18px 18px 14px;border-bottom:1px solid #eef2f7;background:radial-gradient(circle at top left,rgba(91,92,246,0.10),transparent 34%),linear-gradient(180deg,#fff,#f8fafc)}.landing-menu-title{font-size:18px;font-weight:800;margin:0;color:#111827}.landing-menu-subtitle{font-size:13px;color:#64748b;margin-top:4px}.landing-menu-list{list-style:none;margin:0;padding:10px;}.landing-menu-item{margin:0 0 6px}.landing-menu-link{display:flex;align-items:center;gap:12px;padding:11px;border-radius:18px;text-decoration:none;color:#111827;border:1px solid transparent;transition:.16s ease}.landing-menu-link:hover{background:#f8fafc;border-color:#e5e7eb;color:#111827;transform:translateY(-1px)}.landing-menu-link.active{background:rgba(91,92,246,0.08);border-color:rgba(91,92,246,0.28);box-shadow:0 0 0 3px rgba(91,92,246,0.08)}.landing-menu-icon{width:40px;height:40px;min-width:40px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;color:#111827;font-size:19px}.landing-menu-link.active .landing-menu-icon{background:#111827;color:#fff}.landing-menu-text{min-width:0;flex:1}.landing-menu-name{display:block;font-size:14px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.landing-menu-meta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:#64748b;min-width:0}.landing-menu-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:700;white-space:nowrap}.landing-menu-slug{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.landing-menu-arrow{color:#94a3b8;font-size:16px;min-width:16px}.mobile-landing-menu{display:none;margin-bottom:24px}.icon-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}.icon-option{border:1px solid #dbe1ea;border-radius:16px;background:#fff;padding:12px 8px;text-align:center;cursor:pointer;transition:.16s ease;user-select:none}.icon-option:hover{border-color:#5b5cf6;transform:translateY(-1px)}.icon-option.active{border-color:#5b5cf6;background:rgba(91,92,246,0.08);box-shadow:0 0 0 3px rgba(91,92,246,0.12)}.icon-option i{font-size:24px;display:block;margin-bottom:6px;color:#111827}.preset-icon-img{width:28px;height:28px;object-fit:contain;display:block;margin:0 auto 6px}.icon-option span{font-size:12px;color:#475569}.size-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.size-option{border:1px solid #dbe1ea;border-radius:14px;background:#fff;padding:11px 8px;text-align:center;cursor:pointer;transition:.16s ease;user-select:none;font-weight:600}.size-option:hover{border-color:#5b5cf6;transform:translateY(-1px)}.size-option.active{border-color:#5b5cf6;background:rgba(91,92,246,0.08);box-shadow:0 0 0 3px rgba(91,92,246,0.12)}.custom-icon-note{font-size:13px;color:#64748b}.link-row{word-break:break-all}.vcard-photo-preview{width:76px;height:76px;object-fit:cover;border:1px solid #e5e7eb;border-radius:18px;background:#fff;padding:4px}.content-card{border-radius:24px;background:#fff;box-shadow:0 20px 60px rgba(15,23,42,0.08);padding:28px}.content-card h2,.content-card h3{font-weight:800;margin-top:1.4em;margin-bottom:.65em}.content-card h2:first-child,.content-card h3:first-child{margin-top:0}@media (max-width:991px){.left-menu-col{display:none}.mobile-landing-menu{display:block}.landing-menu-list{max-height:none}}@media (max-width:575px){.hero{padding:40px 0}.size-picker{grid-template-columns:repeat(2,1fr)}.icon-picker{grid-template-columns:repeat(2,1fr)}}.icon-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.icon-action-btn{min-height:92px;border:1px solid #dbe1ea;border-radius:18px;background:#fff;padding:14px;text-align:left;display:flex;align-items:center;gap:12px;transition:.16s ease;cursor:pointer}.icon-action-btn:hover{border-color:#5b5cf6;background:rgba(91,92,246,0.04);transform:translateY(-1px)}.icon-action-preview{width:54px;height:54px;min-width:54px;border-radius:16px;background:#f8fafc;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#64748b;font-size:24px}.icon-action-preview img{width:34px;height:34px;object-fit:contain}.icon-action-title{font-weight:700;color:#111827;line-height:1.2}.icon-action-subtitle{font-size:12px;color:#64748b;margin-top:3px}.icon-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}.icon-modal-option{border:1px solid #dbe1ea;border-radius:18px;background:#fff;padding:14px 10px;text-align:center;cursor:pointer;transition:.16s ease}.icon-modal-option:hover{border-color:#5b5cf6;background:rgba(91,92,246,0.05);transform:translateY(-1px)}.icon-modal-option.active{border-color:#5b5cf6;background:rgba(91,92,246,0.08);box-shadow:0 0 0 3px rgba(91,92,246,0.12)}.icon-modal-option img{width:36px;height:36px;object-fit:contain;display:block;margin:0 auto 8px}.icon-modal-option i{display:block;font-size:30px;margin-bottom:8px;color:#64748b}.icon-modal-option span{display:block;font-size:12px;color:#334155;font-weight:600}@media (max-width:575px){.icon-action-grid{grid-template-columns:1fr}.icon-modal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}



    .blog-article-card {
        border: 1px solid #e5e7eb;
        border-radius: 28px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.06);
    }

    .blog-article-cover {
        max-height: 420px;
        overflow: hidden;
        background: #f1f5f9;
    }

    .blog-article-cover img {
        width: 100%;
        height: auto;
        display: block;
    }

    .blog-content {
        font-size: 18px;
        line-height: 1.72;
        color: #1f2937;
    }

    .blog-content h2 {
        margin-top: 42px;
        margin-bottom: 16px;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .blog-content h3 {
        margin-top: 28px;
        margin-bottom: 12px;
        font-weight: 800;
    }

    .blog-content p {
        margin-bottom: 18px;
    }

    .blog-cta {
        border-radius: 24px;
        background:
            radial-gradient(circle at top left, rgba(91, 92, 246, 0.18), transparent 36%),
            #111827;
        color: #fff;
        padding: 28px;
        margin: 28px 0;
    }

    .blog-cta .text-muted {
        color: rgba(255,255,255,.72) !important;
    }

    .blog-generator-wrap {
        border-radius: 28px;
        background: #fff;
        border: 1px solid #e5e7eb;
        padding: 24px;
        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.06);
    }

    .related-card {
        border: 1px solid #e5e7eb;
        border-radius: 24px;
        background: #fff;
        height: 100%;
        overflow: hidden;
    }

    .related-cover {
        height: 140px;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        font-size: 34px;
    }

    .related-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .scanner-hero {
        padding: 56px 0 32px;
        background:
            radial-gradient(circle at top left, rgba(91, 92, 246, 0.12), transparent 34%),
            linear-gradient(180deg, #ffffff, #f8fafc);
    }

    .scanner-card {
        border: 1px solid #e5e7eb;
        border-radius: 28px;
        background: #ffffff;
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
        overflow: hidden;
    }

    .scanner-panel {
        border: 1px solid #e5e7eb;
        border-radius: 24px;
        background: #ffffff;
        padding: 24px;
        height: 100%;
    }

    .scanner-icon {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        background: #f1f5f9;
        color: #111827;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        margin-bottom: 14px;
    }

    .scanner-upload-box {
        border: 2px dashed #cbd5e1;
        border-radius: 22px;
        background: #f8fafc;
        padding: 28px;
        text-align: center;
        cursor: pointer;
        transition: .16s ease;
    }

    .scanner-upload-box:hover {
        background: #f1f5f9;
        border-color: #94a3b8;
    }

    .scanner-preview-wrap {
        border: 1px solid #e5e7eb;
        border-radius: 22px;
        background: #f8fafc;
        padding: 18px;
    }

    .scanner-preview {
        max-width: 100%;
        max-height: 320px;
        border-radius: 16px;
        display: block;
        margin: 0 auto;
    }

    .scanner-video-wrap {
        position: relative;
        border-radius: 22px;
        overflow: hidden;
        background: #0f172a;
        min-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #scannerVideo {
        width: 100%;
        max-height: 420px;
        display: block;
    }

    .scanner-video-placeholder {
        color: rgba(255,255,255,.7);
        text-align: center;
        padding: 28px;
    }

    .scanner-result {
        border-radius: 24px;
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        padding: 22px;
    }

    .scanner-result-value {
        word-break: break-all;
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid #d1fae5;
        padding: 14px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        font-size: 14px;
    }

    .scanner-error {
        border-radius: 20px;
    }

    .content-section {
        padding: 32px 0;
    }

    .seo-content {
        font-size: 17px;
        line-height: 1.72;
    }

    .seo-content h2 {
        margin-top: 38px;
        margin-bottom: 16px;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .seo-content h3 {
        margin-top: 26px;
        margin-bottom: 12px;
        font-weight: 800;
    }

    .seo-content p {
        margin-bottom: 16px;
    }

    .faq-item {
        border: 1px solid #e5e7eb;
        border-radius: 20px;
        background: #ffffff;
        padding: 20px;
        margin-bottom: 14px;
    }

    .faq-item h3 {
        font-size: 18px;
        margin-top: 0;
    }