.body-content:has(> #qr-tool) { padding-inline: 0; }
.qr-tool { min-height: 100vh; padding-bottom: 4rem; background: #edf6fa; color: #112f42; }
.qr-tool [hidden] { display: none !important; }
.qr-tool__hero { display: flex; min-height: clamp(330px, 34vw, 420px); align-items: center; justify-content: center; padding: 8.5rem 1.25rem 3.5rem; background: linear-gradient(90deg, rgba(2, 17, 31, .48), rgba(2, 17, 31, .58)), url('./assets/img/Services/BannerQR.png') center / cover no-repeat; color: #fff; text-align: center; }
.qr-tool__hero-content { width: min(100%, 1000px); }
.qr-tool__eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: #8edaf5; font-size: .83rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.qr-tool__hero h1 { margin: .7rem 0; color: #fff; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; line-height: 1.12; text-transform: uppercase; }
.qr-tool__hero p { max-width: 790px; margin: 0 auto; color: #e2f2f9; font-size: clamp(1rem, 1.4vw, 1.16rem); font-weight: 500; line-height: 1.6; }
.qr-tool__shell { width: calc(100% - clamp(1.5rem, 4vw, 5rem)); max-width: 1280px; margin: 0 auto; padding-top: 1.5rem; }
.qr-tool__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: stretch; gap: 1.25rem; }
.qr-tool__panel { min-width: 0; padding: clamp(1.2rem, 2.2vw, 2rem); border: 1px solid #cbe1eb; border-radius: 1.2rem; background: #fff; box-shadow: 0 16px 38px rgba(19, 64, 87, .08); }
.qr-tool__panel h2 { margin: 0 0 1.35rem; color: #12384c; font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 800; }
.qr-tool form > div[data-qr-fields], .qr-tool__fields { margin-top: 1rem; }
.qr-tool label:not(.qr-tool__check):not(.qr-tool__file):not(.qr-tool__switch):not(.qr-tool__style-choice), .qr-tool__field-label { display: block; margin-bottom: .4rem; color: #25475c; font-size: .9rem; font-weight: 750; }
.qr-tool input[type="text"], .qr-tool input[type="email"], .qr-tool input[type="tel"], .qr-tool input[type="password"], .qr-tool select, .qr-tool textarea { display: block; width: 100%; min-height: 2.85rem; padding: .65rem .8rem; border: 1px solid #bfd6e2; border-radius: .65rem; background: #fbfdfe; color: #173b4f; outline-color: #087fae; }
.qr-tool textarea { min-height: 125px; resize: vertical; }
.qr-tool__types { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; border: 0; }
.qr-tool__types legend { width: 100%; margin-bottom: .3rem; color: #25475c; font-size: .9rem; font-weight: 750; }
.qr-tool__types label { display: inline-flex !important; align-items: center; gap: .4rem; margin: 0 !important; padding: .5rem .75rem; border: 1px solid #b9dbe9; border-radius: .65rem; background: #f3f9fc; color: #20536d; cursor: pointer; }
.qr-tool__types label:has(input:checked) { border-color: #087fae; background: #dff3fb; color: #075e83; }
.qr-tool__types input { accent-color: #087fae; }
.qr-tool__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.qr-tool__fields > div { min-width: 0; }
.qr-tool__settings { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.5rem; margin: 1.35rem 0; padding: 1rem; border: 1px solid #d2e5ee; border-radius: .8rem; background: #f5fafc; }
.qr-tool__settings input[type="color"] { display: block; width: 3.5rem; height: 2.5rem; padding: .15rem; border: 1px solid #bfd6e2; border-radius: .45rem; background: #fff; cursor: pointer; }
.qr-tool__check { display: inline-flex !important; align-items: center; gap: .45rem; margin: .55rem 0 !important; color: #25475c; font-size: .9rem; font-weight: 650; cursor: pointer; }
.qr-tool__check input { width: 1.1rem; height: 1.1rem; accent-color: #087fae; }
.qr-tool__switch { display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 .28rem; color: #25475c; font-size: .9rem; font-weight: 750; cursor: pointer; }
.qr-tool__switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qr-tool__switch-track { position: relative; flex: none; width: 2.8rem; height: 1.55rem; border-radius: 2rem; background: #9fb4c0; transition: background .18s ease; }
.qr-tool__switch-track::after { position: absolute; top: .19rem; left: .2rem; width: 1.17rem; height: 1.17rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #24475b66; content: ''; transition: transform .18s ease; }
.qr-tool__switch input:checked + .qr-tool__switch-track { background: #087fae; }
.qr-tool__switch input:checked + .qr-tool__switch-track::after { transform: translateX(1.23rem); }
.qr-tool__switch input:focus-visible + .qr-tool__switch-track { outline: 3px solid #005b82; outline-offset: 3px; }
.qr-tool__styles { display: flex; flex-wrap: wrap; width: 100%; gap: .5rem; margin: .2rem 0 0; padding: .85rem 0 0; border: 0; border-top: 1px solid #d2e5ee; }
.qr-tool__styles legend { padding: 0 .35rem 0 0; color: #25475c; font-size: .9rem; font-weight: 750; }
.qr-tool__styles .qr-tool__style-choice { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .45rem .75rem; border: 1px solid #b9dbe9; border-radius: .65rem; background: #fff; color: #20536d; font-size: .86rem; font-weight: 700; cursor: pointer; }
.qr-tool__style-choice:has(input:checked) { border-color: #087fae; background: #dff3fb; color: #075e83; }
.qr-tool__style-choice input { accent-color: #087fae; }
.qr-tool__logo { margin: 0 0 1.2rem; }
.qr-tool__logo-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.qr-tool__file { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; min-height: 2.6rem; padding: .55rem .85rem; border: 1px solid #9dcbde; border-radius: .6rem; background: #f3fafc; color: #075e83; font-size: .9rem; font-weight: 750; cursor: pointer; }
.qr-tool__file--remove { border-color: #e1b9b9; background: #fff8f8; color: #9b3434; }
.qr-tool__file:hover, .qr-tool__file:has(+ input:focus-visible) { border-color: #087fae; background: #e2f4fa; outline-offset: 3px; }
.qr-tool__visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.qr-tool__logo small { display: block; margin-top: .4rem; color: #597487; font-size: .82rem; overflow-wrap: anywhere; }
.qr-tool__button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.85rem; padding: .65rem 1.15rem; border: 1px solid #087fae; border-radius: .7rem; background: #087fae; color: #fff; font-weight: 750; text-decoration: none; cursor: pointer; }
.qr-tool__button:hover:not(:disabled), .qr-tool__button:focus-visible { border-color: #045b80; background: #045b80; color: #fff; text-decoration: none; }
.qr-tool__button:disabled { opacity: .6; cursor: wait; }
.qr-tool__status { margin: .85rem 0 0; color: #27647c; font-size: .9rem; line-height: 1.5; }
.qr-tool__status[data-tone="error"] { color: #b03232; }
.qr-tool__result { display: flex; flex-direction: column; height: 100%; }
.qr-tool__preview { display: grid; place-items: center; min-height: 330px; padding: 1rem; border: 1px dashed #a9d4e4; border-radius: .9rem; background: #f5fafc; }
.qr-tool__result .qr-tool__preview { flex: 1; }
.qr-tool__placeholder { display: grid; justify-items: center; gap: 1rem; max-width: 240px; color: #6a8799; text-align: center; }
.qr-tool__placeholder i { font-size: 5rem; color: #a1cbdc; }
.qr-tool__preview img { display: block; max-width: min(100%, 420px); max-height: 60vh; height: auto; }
.qr-tool__download { margin-top: 1rem; }
.qr-tool__scan-hint { margin: 1rem 0 0; color: #597487; font-size: .86rem; line-height: 1.5; }
.qr-tool__promo { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.25rem; padding: clamp(1.25rem, 2.2vw, 1.8rem); border: 1px solid #236c8b; border-radius: 1.2rem; background: linear-gradient(130deg, #102b42, #075a7b); color: #e7f5fa; box-shadow: 0 16px 34px rgba(11, 54, 77, .16); }
.qr-tool__promo h2 { margin: .65rem 0; color: #fff; font-size: 1.3rem; font-weight: 800; }
.qr-tool__promo p { margin: 0; line-height: 1.6; }
.qr-tool__promo a { color: #fff; font-weight: 750; text-underline-offset: .2rem; }
.qr-tool__promo a:hover { color: #9ce4fb; }
@media (max-width: 900px) { .qr-tool__grid { grid-template-columns: 1fr; } .qr-tool__preview { min-height: 260px; } }
@media (max-width: 640px) { .qr-tool__shell { width: calc(100% - 1.5rem); } .qr-tool__fields { grid-template-columns: 1fr; } .qr-tool__hero { padding-top: 7.5rem; } .qr-tool__preview { min-height: 235px; } .qr-tool__promo { align-items: flex-start; flex-direction: column; gap: 1rem; } }