.qr-tool-page { width: min(100%, 1040px); margin: 0 auto; padding: 24px 0 72px; }
.qr-tool-hero { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 58px); border: 1px solid rgba(255, 163, 83, .27); border-radius: 24px; background: radial-gradient(circle at 88% 15%, rgba(255, 132, 58, .2), transparent 35%), linear-gradient(135deg, #21150f 0%, #0c0d11 68%); box-shadow: 0 20px 60px rgba(0, 0, 0, .24); }
.qr-tool-hero::after { content: ''; position: absolute; width: 250px; height: 250px; right: -100px; bottom: -155px; border: 1px solid rgba(255, 183, 121, .2); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255, 155, 81, .035), 0 0 0 56px rgba(255, 155, 81, .025); pointer-events: none; }
.qr-tool-eyebrow { position: relative; z-index: 1; margin: 0 0 12px; color: #ffbd87; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.qr-tool-hero h1 { position: relative; z-index: 1; max-width: 720px; margin: 0; color: #fff; font-size: clamp(30px, 5vw, 54px); line-height: 1.06; letter-spacing: -.045em; }
.qr-tool-hero > p:not(.qr-tool-eyebrow) { position: relative; z-index: 1; max-width: 630px; margin: 18px 0 0; color: #d4c7c0; font-size: 16px; line-height: 1.7; }
.qr-tool-trust { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 23px 0 0; list-style: none; }
.qr-tool-trust li { padding: 8px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #f7e9df; background: rgba(255,255,255,.055); font-size: 12px; font-weight: 650; }
.qr-tool-workbench { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 20px; margin-top: 22px; padding: clamp(18px, 4vw, 34px); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: #111116; }
.qr-tool-form { min-width: 0; }
.qr-tool-field { display: block; min-width: 0; }
.qr-tool-field > span, .qr-tool-field > label, .qr-tool-field > :first-child { display: block; }
.qr-tool-field > span, .qr-tool-field > label { margin-bottom: 8px; color: #f7f0eb; font-size: 13px; font-weight: 700; }
.qr-tool-field > label { display: block; }
.qr-tool-form > .qr-tool-field > label { display: block; margin-bottom: 8px; color: #f7f0eb; font-size: 13px; font-weight: 700; }
.qr-tool-field input, .qr-tool-field select, .qr-tool-field textarea { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; outline: none; color: #f7f9fb; background: #0d0d12; font: inherit; }
.qr-tool-field textarea { min-height: 116px; padding: 11px 12px; resize: vertical; }
.qr-tool-field input[type="color"] { min-height: 43px; padding: 4px; cursor: pointer; }
.qr-tool-field input:focus, .qr-tool-field select:focus, .qr-tool-field textarea:focus { border-color: #ffb878; box-shadow: 0 0 0 3px rgba(255, 147, 76, .16); }
.qr-tool-field small { display: block; margin-top: 7px; color: #979097; font-size: 11px; line-height: 1.42; }
.qr-content-panel { margin-top: 16px; }
.qr-tool-grid, .qr-tool-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.qr-tool-options { grid-template-columns: 1.2fr .7fr .7fr 1.2fr; padding-top: 18px; margin-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.qr-tool-color { min-width: 0; }
.qr-tool-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; color: #c8c0ba; font-size: 12px; cursor: pointer; }
.qr-tool-check input { width: 16px; height: 16px; accent-color: #ff9d58; }
.qr-tool-primary, .qr-tool-secondary, .qr-tool-quiet { min-height: 42px; padding: 0 15px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 750; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.qr-tool-primary { margin-top: 21px; border: 1px solid #ffae6a; color: #301305; background: linear-gradient(135deg, #ffc08b, #ff9550); box-shadow: 0 8px 22px rgba(242, 123, 54, .2); }
.qr-tool-secondary, .qr-tool-quiet { border: 1px solid rgba(255,255,255,.14); color: #f2e8e2; background: rgba(255,255,255,.045); }
.qr-tool-quiet { margin-top: 10px; }
.qr-tool-primary:hover, .qr-tool-secondary:hover, .qr-tool-quiet:hover { transform: translateY(-1px); }
.qr-tool-primary:disabled { opacity: .6; cursor: wait; transform: none; }
.qr-tool-status { min-height: 20px; margin: 15px 0 0; color: #a59b95; font-size: 13px; line-height: 1.5; }
.qr-tool-status.is-ready { color: #9adfbd; }.qr-tool-status.is-working { color: #ffc58f; }.qr-tool-status.is-error { color: #f0a5ac; }
.qr-tool-preview-panel { display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; padding: 23px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: #17171e; text-align: center; }
.qr-tool-preview { display: grid; width: min(100%, 310px); min-height: 250px; place-items: center; overflow: hidden; border-radius: 13px; background: #fff; }
.qr-tool-preview > span { color: #69717a; font-size: 13px; }.qr-tool-preview svg { display: block; width: 100%; height: auto; }
.qr-tool-preview-panel > p { margin: 14px 0 0; color: #aaa19b; font-size: 12px; line-height: 1.5; }
.qr-tool-downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.qr-scanner-workbench { display: block; }.qr-scanner-source { max-width: 520px; margin: 0 auto; text-align: center; }.qr-tool-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.qr-tool-upload { display: flex; min-height: 190px; padding: 24px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; border: 1px dashed rgba(255, 177, 116, .42); border-radius: 17px; background: linear-gradient(145deg, rgba(255, 133, 53, .08), rgba(255,255,255,.015)); cursor: pointer; }.qr-tool-upload-icon { display: grid; width: 57px; height: 57px; place-items: center; border: 1px solid rgba(255, 202, 157, .35); border-radius: 17px; color: #ffe1c9; background: rgba(255, 150, 73, .14); font-weight: 900; letter-spacing: .08em; }.qr-tool-upload strong { color: #fff; font-size: 16px; }.qr-tool-upload small { color: #a49a94; font-size: 12px; }
.qr-scanner-divider { display: flex; align-items: center; gap: 11px; margin: 18px 0; color: #898089; font-size: 12px; }.qr-scanner-divider::before, .qr-scanner-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.qr-scanner-preview { width: min(100%, 520px); margin: 20px auto 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: #08080b; }.qr-scanner-preview video { display: block; width: 100%; max-height: 390px; object-fit: cover; }
.qr-scan-result { display: grid; gap: 9px; max-width: 700px; margin: 18px auto 0; padding: 16px; border: 1px solid rgba(90, 217, 159, .25); border-radius: 14px; background: rgba(54, 189, 127, .07); }.qr-scan-result strong { color: #ebfff4; font-size: 13px; }.qr-scan-result code { overflow-wrap: anywhere; color: #b7d6c5; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }.qr-scan-result > div { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-tool-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }.qr-tool-directory-card { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 120px; padding: 17px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; color: inherit; background: rgba(255,255,255,.025); transition: transform .18s ease, border-color .18s ease, background .18s ease; }.qr-tool-directory-card:hover { border-color: rgba(255, 179, 112, .55); background: rgba(255, 151, 79, .08); transform: translateY(-2px); }.qr-tool-directory-icon { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(255, 202, 157, .34); border-radius: 14px; color: #ffe0c6; background: rgba(255, 150, 73, .14); font-size: 10px; font-weight: 900; letter-spacing: .07em; }.qr-tool-directory-card > span:nth-child(2) { display: grid; gap: 5px; min-width: 0; }.qr-tool-directory-card strong { color: #f8f0eb; font-size: 15px; }.qr-tool-directory-card small { color: #aaa09a; font-size: 12px; line-height: 1.5; }.qr-tool-directory-card b { color: #ffd0a5; font-size: 17px; font-weight: 500; }
.qr-tool-faq { padding: 54px 8px 0; }.qr-tool-faq h2 { margin: 0 0 20px; color: #f8f4f1; font-size: clamp(21px, 3vw, 30px); letter-spacing: -.035em; }.qr-tool-faq > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.qr-tool-faq article { padding: 17px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.025); }.qr-tool-faq h3 { margin: 0; color: #f5eeea; font-size: 14px; }.qr-tool-faq p { margin: 9px 0 0; color: #a69d98; font-size: 12px; line-height: 1.65; }
@media (max-width: 780px) { .qr-tool-workbench { grid-template-columns: 1fr; }.qr-tool-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }.qr-tool-preview { width: min(100%, 340px); } }
@media (max-width: 560px) { .qr-tool-page { padding-top: 14px; }.qr-tool-hero { border-radius: 18px; }.qr-tool-workbench { padding: 14px; border-radius: 18px; }.qr-tool-grid, .qr-tool-options, .qr-tool-faq > div, .qr-tool-directory { grid-template-columns: 1fr; }.qr-tool-primary { width: 100%; }.qr-tool-downloads { flex-direction: column; width: 100%; }.qr-tool-downloads button { width: 100%; } }