.qr-tool-page { background: radial-gradient(circle at 49% 13%, rgba(103, 65, 210, .2), transparent 27%), radial-gradient(circle at 85% 42%, rgba(33, 88, 196, .16), transparent 29%), linear-gradient(180deg, #020615, #05091b 72%, #071028); }
.qr-page-icon { color: #c6c8ff; border-color: rgba(143, 110, 255, .4); background: linear-gradient(145deg, rgba(124, 79, 242, .25), rgba(41, 30, 98, .4)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 36px rgba(104, 82, 241, .16); }.qr-page-hero .eyebrow { color: #9b7cff; }
.qr-workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); border: 1px solid rgba(103, 118, 166, .24); border-radius: 18px; background: linear-gradient(145deg, rgba(18, 28, 53, .94), rgba(6, 14, 33, .96)); box-shadow: 0 25px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025); overflow: hidden; }
.qr-form-panel { padding: 25px; border-right: 1px solid rgba(101, 116, 160, .18); }.qr-field { display: grid; gap: 8px; }.qr-field label, .qr-label-row span { color: #b9bed2; font-size: 12px; }.qr-label-row { display: flex; align-items: center; justify-content: space-between; }.qr-label-row span { color: #70778e; }.qr-content-field textarea { width: 100%; min-height: 128px; padding: 13px 15px; resize: vertical; color: #f3f5ff; border: 1px solid #35415f; border-radius: 10px; outline: 0; background: #091228; font: 13px/1.65 Inter, ui-sans-serif, system-ui, sans-serif; }.qr-content-field textarea::placeholder { color: #6f768b; }.qr-content-field textarea:focus, .qr-field select:focus { border-color: #8667f2; box-shadow: 0 0 0 3px rgba(134, 103, 242, .1); }
.qr-options-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.qr-field select { height: 42px; padding: 0 12px; color: #f7f8ff; border: 1px solid #35415f; border-radius: 9px; outline: 0; background: #0a1329; }.color-control { height: 42px; padding: 5px 10px 5px 6px; display: flex; align-items: center; gap: 9px; border: 1px solid #35415f; border-radius: 9px; background: #0a1329; }.color-control input { width: 31px; height: 29px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }.color-control span { color: #c8ccda; font: 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.qr-actions { margin-top: 22px; display: flex; gap: 10px; }.qr-generate-button, .qr-clear-button, .qr-download-button { height: 43px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .18s ease, filter .18s ease, border-color .18s ease; }.qr-generate-button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: white; border: 0; background: linear-gradient(135deg, #8a5cf1, #526de8); box-shadow: 0 10px 25px rgba(106, 81, 230, .2); }.qr-generate-button:hover { transform: translateY(-1px); filter: brightness(1.08); }.qr-clear-button { width: 90px; color: #aeb4c9; border: 1px solid #37415e; background: rgba(18, 27, 49, .7); }.qr-clear-button:hover { color: white; border-color: #5b6688; }
.qr-preview-panel { padding: 25px; display: flex; flex-direction: column; background: rgba(7, 14, 31, .54); }.qr-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; }.qr-preview-heading h2 { margin: 0; font-size: 17px; }.qr-preview-heading p { margin: 5px 0 0; color: #858ba3; font-size: 12px; }.qr-ready-badge { padding: 4px 9px; color: #c5b9ff; border: 1px solid rgba(137, 105, 242, .3); border-radius: 12px; background: rgba(113, 76, 219, .1); font-size: 10px; }
.qr-preview-box { width: min(270px, 100%); aspect-ratio: 1; margin: 22px auto 18px; padding: 13px; display: grid; place-items: center; border: 1px solid rgba(105, 117, 156, .22); border-radius: 13px; background: rgba(255,255,255,.96); box-shadow: 0 13px 35px rgba(0,0,0,.25); }.qr-preview-box img { width: 100%; height: 100%; display: block; object-fit: contain; image-rendering: pixelated; }.qr-empty-state { display: grid; justify-items: center; gap: 10px; color: #9096aa; text-align: center; }.qr-empty-state span { font-size: 50px; }.qr-empty-state p { margin: 0; font-size: 12px; }
.qr-download-button { width: min(270px, 100%); margin: auto auto 0; color: #cfc7ff; border: 1px solid rgba(131, 102, 233, .45); background: rgba(99, 68, 202, .12); }.qr-download-button:hover { border-color: rgba(152, 123, 255, .7); background: rgba(99, 68, 202, .2); }.qr-download-button:disabled { opacity: .42; cursor: default; }.qr-status { min-height: 29px; margin: 0; padding-top: 9px; color: #9e86f3; font-size: 11px; text-align: center; }.qr-information article > span { color: #9980f4; }

@media (max-width: 860px) {
  .qr-workspace { grid-template-columns: minmax(0, 1fr); }
  .qr-form-panel, .qr-preview-panel { min-width: 0; }
  .qr-form-panel { border-right: 0; border-bottom: 1px solid rgba(101, 116, 160, .18); }
}
@media (max-width: 560px) {
  .qr-workspace { display: block; width: 100%; }
  .qr-form-panel, .qr-preview-panel { width: 100%; padding: 18px; }
  .qr-options-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qr-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .qr-generate-button, .qr-clear-button { width: 100%; }
  .qr-preview-box { width: min(240px, 100%); margin: 18px auto 16px; }
  .qr-download-button { width: min(240px, 100%); }
}