.qr-generator-page { min-height: calc(100vh - 110px); padding: 22px 18px 36px; background: #f6f8fc; }
.qr-generator-shell { max-width: 1180px; margin: 0 auto; }
.qr-page-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.qr-page-heading h1 { margin: 0 0 3px; color: #182033; font-size: 25px; font-weight: 700; }
.qr-page-heading p { margin: 0; color: #748096; font-size: 14px; }
.qr-heading-icon { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; background: #e8edff; color: #4f66d8; font-size: 24px; }
.qr-card { height: calc(100% - 20px); margin-bottom: 20px; padding: 24px; border: 1px solid #e7eaf1; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(31, 42, 68, .06); }
.qr-card-title { margin-bottom: 20px; color: #20283a; font-size: 17px; font-weight: 700; }
.qr-design-heading { display:flex; align-items:center; gap:9px; margin:22px 0 12px; padding-top:20px; border-top:1px solid #edf0f5; color:#20283a; }
.qr-design-heading span { display:flex; width:25px; height:25px; align-items:center; justify-content:center; border-radius:5px; background:#24102f; color:#fff; font-size:13px; }
.qr-design-tabs { display:flex; gap:6px; margin-bottom:12px; }
.qr-design-tabs button { padding:9px 16px; border:0; border-radius:8px; background:transparent; color:#566176; font-size:13px; font-weight:600; }
.qr-design-tabs button.is-active { background:#eef1ff; color:#405bd3; }
.qr-design-panel { display:none; margin-bottom:18px; padding:16px; border:1px solid #e2e6ee; border-radius:10px; }
.qr-design-panel.is-active { display:block; }
.qr-option-title { margin-bottom:12px; color:#30394b; font-size:13px; font-weight:700; }
.qr-frame-options { display:flex; gap:10px; padding:2px 2px 9px; overflow-x:auto; }
.qr-frame-options button { display:flex; min-width:92px; flex-direction:column; align-items:center; gap:7px; padding:9px 7px; border:1px solid #e3e7ef; border-radius:9px; background:#fff; color:#707a8c; }
.qr-frame-options button.is-active { border-color:#6579dc; background:#f0f2ff; color:#405bd3; box-shadow:0 0 0 2px rgba(101,121,220,.1); }
.qr-frame-options button>span { position:relative; display:flex; width:52px; height:58px; align-items:center; justify-content:center; color:#5369d8; }
.qr-frame-options button>span.qr-svg-frame-thumb { width:58px; height:66px; border:0; }
.qr-svg-frame-thumb img { display:block; width:100%; height:100%; object-fit:contain; filter:grayscale(1); opacity:.55; transition:filter .15s,opacity .15s; }
.qr-frame-options button.is-active .qr-svg-frame-thumb img { filter:none; opacity:1; }
.qr-frame-options .frame-thumb { border:2px solid #8d94a3; border-radius:5px; color:#747c8c; font-size:27px; }
.qr-frame-options button.is-active .frame-thumb { border-color:#405bd3; color:#405bd3; }
.qr-frame-options button small { font-size:11px; white-space:nowrap; }
.frame-none { border-radius:8px; background:#f1f3f8; font-size:28px; }
.frame-caption,.frame-top,.frame-card { border:3px solid #303747; border-radius:5px; }
.frame-caption:before,.frame-top:before,.frame-card:before,.frame-envelope:before,.frame-badge:before { content:""; width:27px; height:27px; background:repeating-conic-gradient(#303747 0 25%,transparent 0 50%) 0/9px 9px; }
.frame-caption i,.frame-top i,.frame-card i { position:absolute; left:5px; right:5px; height:8px; border-radius:2px; background:#303747; }
.frame-caption i,.frame-card i{bottom:4px}.frame-top i{top:4px}.frame-top:before{margin-top:9px}.frame-card{border-radius:12px}
.frame-envelope { border:3px solid #303747; border-radius:4px; }.frame-envelope:after{content:"";position:absolute;left:4px;right:4px;bottom:7px;height:22px;border-bottom:3px solid #303747;transform:skewY(-35deg)}.frame-envelope:before{margin-bottom:16px}
.frame-badge { border:3px solid #303747; border-radius:50%; }.frame-badge:after{content:"";position:absolute;left:8px;right:8px;bottom:2px;height:9px;border-radius:4px;background:#303747}.frame-badge:before{margin-bottom:8px}
.qr-frame-settings { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:14px; margin-top:13px; padding:14px; border-radius:9px; background:#f7f8fb; transition:opacity .2s; }
.qr-frame-settings.is-disabled { opacity:.45; pointer-events:none; }
.qr-frame-settings .qr-field { margin:0; }.qr-frame-settings input[type=text]{width:100%;height:43px;padding:0 12px;border:1px solid #dce1ea;border-radius:9px;outline:none}.qr-frame-settings input[type=text]:focus{border-color:#6579dc;box-shadow:0 0 0 3px rgba(101,121,220,.12)}
.qr-eye-title { margin-top:18px; }
.qr-style-options { display:flex; flex-wrap:wrap; gap:10px; }
.qr-style-options button { display:flex; min-width:76px; flex-direction:column; align-items:center; gap:5px; padding:9px 8px; border:1px solid #e4e7ee; border-radius:9px; background:#fff; color:#707a8c; }
.qr-style-options button.is-active { border-color:#6579dc; background:#f0f2ff; color:#405bd3; box-shadow:0 0 0 2px rgba(101,121,220,.1); }
.qr-style-options button > span { width:37px; height:37px; }
.qr-style-options small { font-size:11px; }
.pattern-square { background:repeating-conic-gradient(#111 0 25%,transparent 0 50%) 0/13px 13px; }
.pattern-rounded { border-radius:7px; background:radial-gradient(circle,#111 58%,transparent 60%) 0/12px 12px; }
.pattern-dots { background:radial-gradient(circle,#111 38%,transparent 42%) 0/10px 10px; }
.pattern-diamond { background:linear-gradient(45deg,transparent 32%,#111 33% 67%,transparent 68%) 0/12px 12px; }
.eye-square,.eye-rounded,.eye-circle { position:relative; border:6px solid #111; box-shadow:inset 0 0 0 6px #fff; background:#111; }
.eye-rounded { border-radius:9px; }
.eye-circle { border-radius:50%; }
.qr-level-options { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.qr-level-options button { display:flex; flex-direction:column; align-items:center; gap:3px; padding:13px 6px; border:1px solid #e3e7ef; border-radius:9px; background:#fff; color:#566176; }
.qr-level-options button span { display:flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:7px; background:#edf0f6; font-size:20px; font-weight:800; }
.qr-level-options button small { color:#919bad; }
.qr-level-options button.is-active { border-color:#6579dc; background:#f0f2ff; color:#405bd3; }
.qr-level-options button.is-active span { background:#5369d8; color:#fff; }
.qr-logo-drop { display:block; margin:0; padding:17px; border:1px dashed #bcc5d5; border-radius:9px; background:#fbfcfe; cursor:pointer; }
.qr-logo-drop.is-dragging { border-color:#5369d8; background:#f0f2ff; }
.qr-logo-drop input { display:none; }
.qr-logo-placeholder { display:flex; flex-direction:column; align-items:center; gap:5px; color:#6f798b; text-align:center; }
.qr-logo-placeholder i { color:#5369d8; font-size:25px; }.qr-logo-placeholder strong{font-size:13px}.qr-logo-placeholder small{font-size:11px}
.qr-logo-selected { display:none; align-items:center; justify-content:center; gap:12px; text-align:left; }.qr-logo-selected img{width:52px;height:52px;object-fit:contain;border-radius:7px}.qr-logo-selected span{display:flex;flex-direction:column;max-width:260px}.qr-logo-selected strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.qr-logo-selected small{color:#8c96a8;font-size:11px}
.qr-remove-logo { display:none; margin-top:9px; padding:0; border:0; background:transparent; color:#cc4452; font-size:12px; }
.qr-panel-note { margin:12px 0 0; color:#7e899d; font-size:11px; }
.qr-field { display: block; margin: 0 0 18px; }
.qr-field > span:first-child { display: block; margin-bottom: 7px; color: #4a556a; font-size: 13px; font-weight: 600; }
.qr-field textarea, .qr-field select { width: 100%; border: 1px solid #dce1ea; border-radius: 9px; background: #fff; color: #20283a; font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.qr-field textarea { min-height: 155px; padding: 13px 14px; resize: vertical; }
.qr-field select { height: 43px; padding: 0 12px; }
.qr-field textarea:focus, .qr-field select:focus { border-color: #6579dc; box-shadow: 0 0 0 3px rgba(101, 121, 220, .12); }
.qr-field small { display: block; margin-top: 5px; color: #98a1b2; text-align: right; }
.qr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.qr-color-control { display: flex; height: 43px; align-items: center; gap: 10px; padding: 5px 10px; border: 1px solid #dce1ea; border-radius: 9px; }
.qr-color-control input { width: 34px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.qr-color-control code { color: #5d6678; font-family: inherit; font-size: 13px; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.qr-auto-note { margin:9px 0 0; color:#8a94a8; font-size:11px; }.qr-auto-note i{color:#5369d8}
.qr-actions .btn, .qr-download-btn { min-height: 43px; padding: 9px 18px; border-radius: 9px; font-weight: 600; }
.qr-primary-btn { border-color: #5369d8; background: #5369d8; color: #fff; }
.qr-primary-btn:hover, .qr-primary-btn:focus { background: #4358c4; color: #fff; }
.qr-secondary-btn { border: 1px solid #dce1ea; background: #fff; color: #5d6678; }
.qr-preview-card { text-align: center; }
.qr-preview-card .qr-card-title { text-align: left; }
.qr-preview { position:relative; display: flex; min-height: 355px; align-items: center; justify-content: center; padding: 20px; border: 1px dashed #d7ddea; border-radius: 12px; background: #fafbfe; overflow:hidden; }
.qr-preview::after { content:""; position:absolute; inset:0; display:none; background:rgba(250,251,254,.72); }
.qr-preview::before { content:""; position:absolute; z-index:2; top:50%; left:50%; display:none; width:32px; height:32px; margin:-16px 0 0 -16px; border:3px solid #d9deeb; border-top-color:#5369d8; border-radius:50%; animation:qr-preview-spin .7s linear infinite; }
.qr-preview.is-loading::before, .qr-preview.is-loading::after { display:block; }
@keyframes qr-preview-spin { to { transform:rotate(360deg); } }
.qr-preview img { display: none; width: 100%; max-width: 315px; max-height: 430px; object-fit: contain; height: auto; border-radius: 5px; image-rendering: auto; }
.qr-empty-state { display: flex; flex-direction: column; align-items: center; color: #96a0b3; }
.qr-empty-state i { margin-bottom: 13px; color: #c4cbda; font-size: 72px; }
.qr-empty-state strong { margin-bottom: 5px; color: #69758a; font-size: 15px; }
.qr-empty-state span { font-size: 13px; }
.qr-download-btn { width: 100%; margin-top: 16px; border: 0; background: #1f9d72; color: #fff; }
.qr-download-btn:hover:not(:disabled) { background: #18845f; color: #fff; }
.qr-download-btn:disabled { background: #dce1e8; color: #919aaa; cursor: not-allowed; }
.qr-tip { margin: 14px 0 0; color: #8a94a8; font-size: 12px; }
.qr-message { display: none; margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.qr-message.is-visible { display: block; }
.qr-message.is-error { background: #fff0f1; color: #c43d4b; }
.qr-message.is-success { background: #eaf8f2; color: #197958; }
@media (max-width: 767px) {
    .qr-generator-page { padding: 15px 5px 25px; }
    .qr-page-heading h1 { font-size: 21px; }
    .qr-card { padding: 18px; }
    .qr-form-grid { grid-template-columns: 1fr; }
    .qr-level-options { grid-template-columns:repeat(2,1fr); }
    .qr-frame-settings { grid-template-columns:1fr; }
    .qr-preview { min-height: 290px; }
}
