.qrcode-studio-root{
  --qs-text:#101828;
  --qs-muted:#667085;
  --qs-border:#e4e7ec;
  --qs-border-strong:#cfd5df;
  --qs-surface:#fff;
  --qs-soft:#f8f9fc;
  --qs-primary:#101828;
  --qs-accent:#635bff;
  box-sizing:border-box;
  color:var(--qs-text);
  background:#f6f7fb;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.45;
}
.qrcode-studio-root *{box-sizing:border-box}
.qrcode-studio-root button,
.qrcode-studio-root input,
.qrcode-studio-root textarea,
.qrcode-studio-root select{font:inherit}
.qrcode-studio-root button{appearance:none;-webkit-appearance:none}
.qrcode-studio-root .app{width:min(calc(100% - 40px),var(--qs-container,1180px));margin:0 auto;padding-bottom:32px}
.qrcode-studio-root .topbar{display:flex;justify-content:space-between;align-items:center;min-height:70px;padding:12px 0;border-bottom:1px solid var(--qs-border);background:var(--qs-header-bg);color:var(--qs-header-text)}
.qrcode-studio-root .qrcode-header-sticky{position:sticky;top:0;z-index:30}
.qrcode-studio-root .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0}
.qrcode-studio-root .logo{width:var(--qs-logo-width,42px);height:var(--qs-logo-width,42px);display:grid;place-items:center;flex:0 0 auto}
.qrcode-studio-root .logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.qrcode-studio-root .brand-logo-fallback{font-weight:800}
.qrcode-studio-root .brand-copy{display:flex;flex-direction:column;min-width:0}
.qrcode-studio-root .brand-copy strong{font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrcode-studio-root .brand-copy small{font-size:10px;opacity:.65;margin-top:3px}
.qrcode-studio-root .icon-btn{width:40px;height:40px;border:1px solid var(--qs-border);border-radius:10px;background:var(--qs-surface);color:inherit;cursor:pointer}
.qrcode-studio-root .icon-btn:hover{border-color:#98a2b3}
.qrcode-studio-root .qrcode-breadcrumbs{margin:12px 0;font-size:12px;color:var(--qs-muted)}
.qrcode-studio-root .qrcode-breadcrumbs a{color:inherit;text-decoration:none}
.qrcode-studio-root .qrcode-breadcrumbs a:hover{text-decoration:underline}
.qrcode-studio-root .hero{padding:26px 0 22px}
.qrcode-studio-root .eyebrow,.qrcode-studio-root .section-eyebrow{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--qs-muted)}
.qrcode-studio-root .eyebrow{display:inline-flex;align-items:center;gap:6px;color:var(--qs-accent)}
.qrcode-studio-root .hero h1{font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.03em;margin:7px 0 10px}
.qrcode-studio-root .hero p{max-width:780px;margin:0;color:var(--qs-muted);line-height:1.65;font-size:15px}
.qrcode-studio-root .workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:20px;align-items:start}
.qrcode-studio-root .card{background:var(--qs-surface);border:1px solid var(--qs-border);border-radius:18px;padding:22px;box-shadow:0 4px 18px rgba(16,24,40,.035)}
.qrcode-studio-root .controls{min-width:0}
.qrcode-studio-root .preview{position:sticky;top:86px;min-width:0}
.qrcode-studio-root .section-title,.qrcode-studio-root .preview-head,.qrcode-studio-root .meta{display:flex;justify-content:space-between;gap:12px;align-items:center}
.qrcode-studio-root .section-title h2,.qrcode-studio-root .preview-head h2{margin:2px 0 0;font-size:18px;line-height:1.25}
.qrcode-studio-root .kicker,.qrcode-studio-root .settings-summary,.qrcode-studio-root .input-hint{font-size:11px;color:var(--qs-muted)}
.qrcode-studio-root .qr-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}
.qrcode-studio-root .qr-type{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:62px;
  border:1px solid var(--qs-border);
  border-radius:12px;
  padding:10px 11px;
  background:#fff;
  color:var(--qs-text);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease,background .15s ease;
}
.qrcode-studio-root .qr-type:hover{border-color:#98a2b3;transform:translateY(-1px)}
.qrcode-studio-root .qr-type:focus-visible,.qrcode-studio-root .btn:focus-visible,.qrcode-studio-root .icon-btn:focus-visible{outline:3px solid rgba(99,91,255,.2);outline-offset:1px}
.qrcode-studio-root .qr-type.active{border-color:var(--qs-primary);background:#f8f9fc;box-shadow:0 0 0 2px rgba(16,24,40,.07)}
.qrcode-studio-root .qr-type-icon{
  width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;
  border-radius:9px;background:#f2f4f7;color:#344054;font-size:14px;font-weight:800;
}
.qrcode-studio-root .qr-type.active .qr-type-icon{background:var(--qs-primary);color:#fff}
.qrcode-studio-root .qr-type strong,.qrcode-studio-root .qr-type small{display:block}
.qrcode-studio-root .qr-type strong{font-size:13px;line-height:1.2}
.qrcode-studio-root .qr-type small{font-size:10px;color:var(--qs-muted);margin-top:4px;line-height:1.2}
.qrcode-studio-root .input-panel{margin-top:14px;padding:16px;border:1px solid var(--qs-border);border-radius:14px;background:#fcfcfd}
.qrcode-studio-root .input-panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.qrcode-studio-root .input-panel-head h3{font-size:14px;margin:2px 0 0}
.qrcode-studio-root .qr-fields,.qrcode-studio-root .design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qrcode-studio-root .qr-fields .field:first-child{grid-column:1/-1}
.qrcode-studio-root .field{min-width:0}
.qrcode-studio-root .field label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;color:#344054}
.qrcode-studio-root .optional{font-weight:500;color:var(--qs-muted);font-size:10px}
.qrcode-studio-root input:not([type=checkbox]):not([type=range]):not([type=color]),
.qrcode-studio-root textarea,
.qrcode-studio-root select{
  width:100%;
  border:1px solid #d0d5dd;
  border-radius:10px;
  padding:10px 11px;
  background:#fff;
  color:var(--qs-text);
  outline:0;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.qrcode-studio-root input:not([type=checkbox]):not([type=range]):not([type=color]):focus,
.qrcode-studio-root textarea:focus,
.qrcode-studio-root select:focus{border-color:#7f77ff;box-shadow:0 0 0 3px rgba(99,91,255,.11)}
.qrcode-studio-root textarea{resize:vertical;min-height:92px}
.qrcode-studio-root input[type=color]{display:block;width:100%;height:42px;padding:4px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;cursor:pointer}
.qrcode-studio-root input[type=range]{display:block;width:100%;margin:10px 0 0;padding:0;accent-color:var(--qs-accent);cursor:pointer}
.qrcode-studio-root .field small{display:block;color:var(--qs-muted);font-size:10px;margin-top:5px}
.qrcode-studio-root .settings-panel{margin-top:16px;border:1px solid var(--qs-border);border-radius:14px;background:#fff;overflow:hidden}
.qrcode-studio-root .settings-panel summary{list-style:none;cursor:pointer}
.qrcode-studio-root .settings-panel summary::-webkit-details-marker{display:none}
.qrcode-studio-root .settings-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--qs-border)}
.qrcode-studio-root .settings-panel:not([open]) .settings-heading{border-bottom:0}
.qrcode-studio-root .settings-heading>span:first-child{display:flex;flex-direction:column}
.qrcode-studio-root .settings-heading strong{font-size:14px;margin-top:2px}
.qrcode-studio-root .settings-summary:after{content:"⌄";margin-left:8px}
.qrcode-studio-root .settings-panel:not([open]) .settings-summary:after{content:"›"}
.qrcode-studio-root .settings-panel .design-grid{padding:16px}
.qrcode-studio-root .color-control{display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:center}
.qrcode-studio-root .color-control span{height:42px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--qs-border);border-radius:10px;background:#fcfcfd;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#475467}
.qrcode-studio-root .range-field output{float:right;font-size:11px;font-weight:700;color:#344054}
.qrcode-studio-root .check-field{display:flex;align-items:flex-end}
.qrcode-studio-root .check-field label,.qrcode-studio-root .check-label{display:flex!important;align-items:center;gap:8px;min-height:42px;margin:0!important}
.qrcode-studio-root input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--qs-accent)}
.qrcode-studio-root .logo-row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(150px,.8fr) auto;gap:12px;padding:0 16px 16px;align-items:end}
.qrcode-studio-root .logo-row .btn{white-space:nowrap}
.qrcode-studio-root .advanced-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.qrcode-studio-root .actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
.qrcode-studio-root .btn{border:1px solid transparent;border-radius:10px;min-height:40px;padding:10px 13px;font-size:12px;font-weight:750;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.qrcode-studio-root .btn:hover{transform:translateY(-1px)}
.qrcode-studio-root .btn.primary{background:var(--qs-primary);color:#fff}
.qrcode-studio-root .btn.primary:hover{background:#1d2939}
.qrcode-studio-root .btn.secondary{background:#eef2ff;color:#344054;border-color:#e0e7ff}
.qrcode-studio-root .btn.ghost{background:#f2f4f7;color:#344054;border-color:#eaecf0}
.qrcode-studio-root .btn.mini{min-height:40px;padding:9px 11px}
.qrcode-studio-root .qr-status{min-height:20px;color:#b42318;font-size:12px;margin-top:10px}
.qrcode-studio-root .preview-head{margin-bottom:14px}
.qrcode-studio-root .live-indicator{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#027a48;white-space:nowrap}
.qrcode-studio-root .live-indicator i{width:7px;height:7px;border-radius:50%;background:#12b76a;display:block}
.qrcode-studio-root .canvas-wrap{min-height:430px;display:grid;place-items:center;background:linear-gradient(135deg,#f8f9fc,#f3f4f8);border:1px solid #eef0f4;border-radius:14px;padding:22px;overflow:auto}
.qrcode-studio-root .qr-paper{display:grid;place-items:center;background:#fff;padding:18px;border-radius:8px;box-shadow:0 12px 35px rgba(16,24,40,.1);min-width:220px;min-height:220px}
.qrcode-studio-root #qrCanvas{line-height:0;max-width:100%}
.qrcode-studio-root #qrCanvas svg{display:block;width:min(100%,390px);height:auto;max-width:390px}
.qrcode-studio-root .meta{font-size:11px;color:var(--qs-muted);margin-top:11px}
.qrcode-studio-root .meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrcode-studio-root .quality{margin-top:10px;border-radius:10px;padding:10px 11px;font-size:11px}
.qrcode-studio-root .quality.neutral{background:#f2f4f7;color:#475467}
.qrcode-studio-root .quality.good{background:#ecfdf3;color:#027a48}
.qrcode-studio-root .quality.warn{background:#fffaeb;color:#b54708}
.qrcode-studio-root .quality.danger{background:#fef3f2;color:#b42318}
.qrcode-studio-root .preview-tip{display:flex;gap:9px;align-items:flex-start;margin-top:10px;padding:10px 11px;border:1px solid #eaecf0;border-radius:10px;background:#fcfcfd}
.qrcode-studio-root .preview-tip p{margin:0;font-size:10px;color:#667085;line-height:1.5}
.qrcode-studio-root .preview-tip strong{color:#344054}
.qrcode-studio-root .tip-icon{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#ecfdf3;color:#027a48;font-size:10px;font-weight:800;flex:0 0 auto}
.qrcode-studio-root .history-panel{margin-top:10px;border:1px solid var(--qs-border);border-radius:12px;padding:10px;background:#fcfcfd}
.qrcode-studio-root .history-head{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 8px}
.qrcode-studio-root .history-head button{border:0;background:none;font-size:20px;cursor:pointer;color:#475467}
.qrcode-studio-root .history-item{display:grid;grid-template-columns:1fr auto;gap:6px;border-top:1px solid #eaecf0}
.qrcode-studio-root .history-item>button:first-child{border:0;background:none;color:var(--qs-text);text-align:left;padding:10px 4px;cursor:pointer}
.qrcode-studio-root .history-item strong,.qrcode-studio-root .history-item small{display:block}
.qrcode-studio-root .history-item small{font-size:11px;color:var(--qs-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.qrcode-studio-root .history-delete{border:0;background:none;color:#b42318;cursor:pointer}
.qrcode-studio-root .info-card{margin-top:20px}
.qrcode-studio-root .info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.qrcode-studio-root .info-grid>div{padding:14px;border:1px solid #eaecf0;border-radius:12px;background:#fcfcfd}
.qrcode-studio-root .info-grid h3{font-size:13px;margin:0 0 5px}
.qrcode-studio-root .info-grid p{font-size:11px;color:var(--qs-muted);line-height:1.55;margin:0}
.qrcode-studio-root .site-footer{margin-top:30px;padding:24px 0;background:var(--qs-footer-bg);color:var(--qs-footer-text)}
@media(max-width:980px){
  .qrcode-studio-root .workspace{grid-template-columns:1fr}
  .qrcode-studio-root .preview{position:static}
  .qrcode-studio-root .canvas-wrap{min-height:420px}
}
@media(max-width:680px){
  .qrcode-studio-root .app{width:calc(100% - 24px)}
  .qrcode-studio-root .hero{padding-top:20px}
  .qrcode-studio-root .hero h1{font-size:32px}
  .qrcode-studio-root .qr-type-grid{grid-template-columns:repeat(3,1fr)}
  .qrcode-studio-root .qr-fields,.qrcode-studio-root .design-grid{grid-template-columns:1fr}
  .qrcode-studio-root .qr-fields .field:first-child{grid-column:auto}
  .qrcode-studio-root .logo-row{grid-template-columns:1fr 1fr}
  .qrcode-studio-root .logo-field{grid-column:1/-1}
  .qrcode-studio-root .logo-row .btn{width:100%}
  .qrcode-studio-root .info-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .qrcode-studio-root .app{width:calc(100% - 16px)}
  .qrcode-studio-root .card{padding:16px;border-radius:15px}
  .qrcode-studio-root .qr-type-grid{grid-template-columns:repeat(2,1fr)}
  .qrcode-studio-root .qr-type{min-height:58px}
  .qrcode-studio-root .input-panel{padding:12px}
  .qrcode-studio-root .input-panel-head{align-items:flex-start;flex-direction:column;gap:4px}
  .qrcode-studio-root .logo-row{grid-template-columns:1fr}
  .qrcode-studio-root .logo-field{grid-column:auto}
  .qrcode-studio-root .actions .btn{flex:1 1 calc(50% - 8px)}
  .qrcode-studio-root .actions .primary{flex-basis:100%}
  .qrcode-studio-root .info-grid{grid-template-columns:1fr}
  .qrcode-studio-root .canvas-wrap{min-height:330px;padding:14px}
}

/* Scoped dark mode: only QR Code Studio is affected. */
.qrcode-studio-root.is-dark{
  --qs-text:#f2f4f7;
  --qs-muted:#98a2b3;
  --qs-border:#344054;
  --qs-border-strong:#475467;
  --qs-surface:#161b22;
  --qs-soft:#1d2430;
  --qs-primary:#f2f4f7;
  --qs-accent:#8b83ff;
  background:#0f141b;
}
.qrcode-studio-root.is-dark .card,
.qrcode-studio-root.is-dark .input-panel,
.qrcode-studio-root.is-dark .settings-panel,
.qrcode-studio-root.is-dark .qr-type,
.qrcode-studio-root.is-dark input:not([type=checkbox]):not([type=range]):not([type=color]),
.qrcode-studio-root.is-dark textarea,
.qrcode-studio-root.is-dark select,
.qrcode-studio-root.is-dark .color-control span,
.qrcode-studio-root.is-dark .preview-tip,
.qrcode-studio-root.is-dark .history-panel{
  background:#161b22;
  color:var(--qs-text);
  border-color:#344054;
}
.qrcode-studio-root.is-dark .qr-type.active{background:#202938;border-color:#98a2b3}
.qrcode-studio-root.is-dark .qr-type-icon{background:#273142;color:#d0d5dd}
.qrcode-studio-root.is-dark .qr-type.active .qr-type-icon{background:#f2f4f7;color:#101828}
.qrcode-studio-root.is-dark .canvas-wrap{background:linear-gradient(135deg,#151b24,#11161d);border-color:#273142}
.qrcode-studio-root.is-dark .qr-paper{background:#fff}
.qrcode-studio-root.is-dark .btn.ghost{background:#202938;color:#d0d5dd;border-color:#344054}
.qrcode-studio-root.is-dark .btn.secondary{background:#27234d;color:#e4e7ff;border-color:#403b75}
.qrcode-studio-root.is-dark .settings-heading{border-color:#344054}
.qrcode-studio-root.is-dark .info-grid>div{background:#161b22;border-color:#344054}

.qrcode-studio-root.is-dark .topbar{background:#161b22;color:#f2f4f7;border-color:#344054}
.qrcode-studio-root.is-dark .icon-btn{background:#202938;border-color:#344054;color:#f2f4f7}

/* SEO content: readable, crawlable and visually consistent with the tool. */
.qrcode-studio-root .seo-jump-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.qrcode-studio-root .seo-jump-links a{display:inline-flex;align-items:center;padding:8px 11px;border:1px solid var(--border,#e5e7eb);border-radius:999px;text-decoration:none;font-size:13px;font-weight:600;color:inherit;background:var(--surface,#fff)}
.qrcode-studio-root .seo-content{margin-top:18px;padding:26px}
.qrcode-studio-root .seo-content h2{margin:4px 0 14px}
.qrcode-studio-root .seo-content h3{margin:0 0 7px;font-size:16px}
.qrcode-studio-root .seo-content p,.qrcode-studio-root .seo-content li{line-height:1.7}
.qrcode-studio-root .seo-content ol{margin:0 0 16px;padding-left:22px}
.qrcode-studio-root .seo-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.qrcode-studio-root .seo-type-grid>div{padding:16px;border:1px solid var(--border,#e5e7eb);border-radius:14px}
.qrcode-studio-root .faq-content details{border-top:1px solid var(--border,#e5e7eb);padding:14px 0}
.qrcode-studio-root .faq-content details:last-child{border-bottom:1px solid var(--border,#e5e7eb)}
.qrcode-studio-root .faq-content summary{cursor:pointer;font-weight:700}
@media (max-width:800px){.qrcode-studio-root .seo-type-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.qrcode-studio-root .seo-content{padding:20px}.qrcode-studio-root .seo-type-grid{grid-template-columns:1fr}}