/* Portable tool stylesheet: every application rule is isolated under .qr-studio-tool. */
.qr-studio-tool{
  --bg:#f7f9fc;
  --panel:#ffffff;
  --panel2:#f4f7fb;
  --line:#dfe4ea;
  --line-strong:#cfd6df;
  --text:#13213a;
  --muted:#74839a;
  --accent:#5f9cff;
  --accent2:#7fb6ff;
  --good:#2e9f67;
  --warn:#d9952f;
  --bad:#d85b67;
  --shadow:0 10px 28px rgba(23,43,77,.07);
  --shadow-soft:0 2px 8px rgba(23,43,77,.045);
  --radius:18px;
  --radius-sm:12px;
  --field:#ffffff;
}
.qr-studio-tool,.qr-studio-tool *{box-sizing:border-box}
.qr-studio-tool{color-scheme:light;scroll-behavior:smooth}
.qr-studio-tool{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.qr-studio-tool button,.qr-studio-tool input,.qr-studio-tool textarea,.qr-studio-tool select{font:inherit}
.qr-studio-tool button{color:inherit}
.qr-studio-tool .app{max-width:1440px;margin:0 auto;padding:28px 24px 56px}

.qr-studio-tool /* Header */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.qr-studio-tool .brand{display:flex;align-items:center;gap:14px;min-width:0}
.qr-studio-tool .mark{
  width:44px;height:44px;border-radius:14px;
  background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;
  box-shadow:var(--shadow-soft);
  color:var(--text)
}
.qr-studio-tool .mark svg{width:24px;height:24px}
.qr-studio-tool .brand h1{margin:0;font-size:1.16rem;letter-spacing:-.025em;font-weight:760;color:var(--text)}
.qr-studio-tool .brand p{margin:3px 0 0;color:var(--muted);font-size:.84rem}
.qr-studio-tool .top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.qr-studio-tool .pill,.qr-studio-tool .status-badge{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:7px 11px;color:var(--muted);font-size:.76rem;
  box-shadow:var(--shadow-soft)
}
.qr-studio-tool .status-badge i{width:6px;height:6px;border-radius:50%;background:var(--good)}

.qr-studio-tool /* Main layout */
.workspace{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:22px;align-items:start}
.qr-studio-tool .panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden
}
.qr-studio-tool .panel-head{
  padding:20px 20px 18px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff
}
.qr-studio-tool .panel-head h2{font-size:1rem;margin:0;color:var(--text)}
.qr-studio-tool .panel-head p{margin:4px 0 0;color:var(--muted);font-size:.84rem}
.qr-studio-tool .panel-body{padding:20px}
.qr-studio-tool .section-label{font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:#8290a5;font-weight:750;margin:0 0 10px}

.qr-studio-tool /* Content type buttons */
.type-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:18px}
.qr-studio-tool .type-btn{
  border:1px solid var(--line);background:#fff;padding:11px 8px;border-radius:12px;
  cursor:pointer;color:var(--muted);transition:.16s ease;min-height:54px
}
.qr-studio-tool .type-btn:hover{border-color:#b9c7d8;color:var(--text);transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.qr-studio-tool .type-btn.active{
  border-color:var(--accent);background:#eef5ff;color:var(--text);
  box-shadow:0 0 0 1px rgba(95,156,255,.12)
}
.qr-studio-tool .type-btn strong{display:block;font-size:.82rem;font-weight:700}
.qr-studio-tool .type-btn span{display:block;font-size:.7rem;margin-top:3px;opacity:.72}

.qr-studio-tool /* Fields */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qr-studio-tool .field-row{display:flex;flex-direction:column;gap:6px}
.qr-studio-tool .field-row.full{grid-column:1/-1}
.qr-studio-tool .field-row label{font-size:.79rem;color:#3f4d63;font-weight:650}
.qr-studio-tool .control{
  width:100%;border:1px solid var(--line);background:var(--field);color:var(--text);
  border-radius:11px;padding:10px 11px;outline:none;transition:.15s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}
.qr-studio-tool .control::placeholder{color:#9aa7b8}
.qr-studio-tool .control:hover{border-color:#c8d1dc}
.qr-studio-tool .control:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(95,156,255,.14)}
.qr-studio-tool textarea.control{resize:vertical;min-height:92px;line-height:1.45}
.qr-studio-tool .hint{font-size:.75rem;color:var(--muted);line-height:1.42}
.qr-studio-tool .inline{display:flex;gap:10px;align-items:center}.qr-studio-tool .inline .control{flex:1}
.qr-studio-tool .two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qr-studio-tool .check{display:flex;gap:9px;align-items:center;color:#46556b;font-size:.82rem}
.qr-studio-tool .check input{accent-color:var(--accent)}

.qr-studio-tool /* Accordions */
.accordion{
  margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease
}
.qr-studio-tool .accordion:hover{border-color:#d3dae3}
.qr-studio-tool .accordion[open]{box-shadow:0 3px 14px rgba(23,43,77,.045)}
.qr-studio-tool .accordion summary{
  list-style:none;cursor:pointer;padding:14px 15px;display:flex;justify-content:space-between;
  align-items:center;font-weight:700;font-size:.88rem;background:#fff
}
.qr-studio-tool .accordion summary::-webkit-details-marker{display:none}
.qr-studio-tool .accordion summary::after{content:'+';font-size:1.18rem;color:#8b99aa;font-weight:400}
.qr-studio-tool .accordion[open] summary::after{content:'−'}
.qr-studio-tool .accordion[open] summary{border-bottom:1px solid var(--line)}
.qr-studio-tool .acc-body{padding:15px;background:#fff}
.qr-studio-tool .subsection+.subsection{border-top:1px solid #e8edf2;margin-top:16px;padding-top:16px}
.qr-studio-tool .subhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.qr-studio-tool .subhead h3{font-size:.82rem;margin:0;color:var(--text)}
.qr-studio-tool .subhead span{font-size:.72rem;color:var(--muted)}

.qr-studio-tool /* Colors / segmented controls */
.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qr-studio-tool .color-control{display:grid;grid-template-columns:40px 1fr;gap:9px;align-items:center}
.qr-studio-tool .color-control input[type=color]{width:40px;height:40px;border:1px solid var(--line);padding:3px;background:#fff;border-radius:10px}
.qr-studio-tool .color-control input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.qr-studio-tool .color-control input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}
.qr-studio-tool .segmented{display:flex;gap:6px;flex-wrap:wrap}
.qr-studio-tool .seg-btn{
  border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;
  color:var(--muted);cursor:pointer;font-size:.78rem;transition:.15s ease
}
.qr-studio-tool .seg-btn:hover{border-color:#bcc9d8;color:var(--text)}
.qr-studio-tool .seg-btn.active{color:var(--text);border-color:var(--accent);background:#eef5ff;box-shadow:0 0 0 1px rgba(95,156,255,.1)}

.qr-studio-tool /* Shape studio */
.shape-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.qr-studio-tool .shape-btn{
  min-height:48px;border:1px solid var(--line);background:#fff;border-radius:11px;
  display:grid;place-items:center;cursor:pointer;transition:.15s ease
}
.qr-studio-tool .shape-btn:hover{border-color:#b8c6d6;transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.qr-studio-tool .shape-btn.active{border-color:var(--accent);background:#eef5ff;box-shadow:0 0 0 1px rgba(95,156,255,.12)}
.qr-studio-tool .shape-icon{width:19px;height:19px;background:#1b2940}
.qr-studio-tool .shape-icon.dot{border-radius:50%}.qr-studio-tool .shape-icon.rounded{border-radius:6px}
.qr-studio-tool .shape-icon.diamond{transform:rotate(45deg);width:15px;height:15px}
.qr-studio-tool .shape-icon.soft{border-radius:9px 3px 9px 3px}
.qr-studio-tool .range-line{display:grid;grid-template-columns:1fr 54px;gap:10px;align-items:center}
.qr-studio-tool .range-line input[type=range]{width:100%;accent-color:var(--accent)}
.qr-studio-tool .num-badge{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 7px;text-align:center;color:#536176;font-size:.75rem}

.qr-studio-tool /* Logo */
.logo-drop{
  border:1px dashed #bdc8d4;border-radius:13px;padding:16px;text-align:center;
  background:#f9fbfd;cursor:pointer;transition:.15s ease
}
.qr-studio-tool .logo-drop:hover{border-color:var(--accent);background:#f5f9ff}
.qr-studio-tool .logo-drop input{display:none}
.qr-studio-tool .logo-drop strong{display:block;font-size:.83rem;color:var(--text)}
.qr-studio-tool .logo-drop span{display:block;color:var(--muted);font-size:.74rem;margin-top:4px}
.qr-studio-tool .logo-preview{display:none;margin-top:10px;align-items:center;gap:10px}
.qr-studio-tool .logo-preview.show{display:flex}
.qr-studio-tool .logo-thumb{width:44px;height:44px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.qr-studio-tool .logo-meta{min-width:0;flex:1}
.qr-studio-tool .logo-meta strong,.qr-studio-tool .logo-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-studio-tool .logo-meta strong{font-size:.78rem}.qr-studio-tool .logo-meta span{color:var(--muted);font-size:.7rem}
.qr-studio-tool .text-btn{background:none;border:0;color:#477fd1;cursor:pointer;padding:5px;font-size:.75rem}
.qr-studio-tool .text-btn:hover{text-decoration:underline}

.qr-studio-tool /* Buttons */
.btn-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.qr-studio-tool .btn{
  border:1px solid var(--line);background:#fff;color:#324158;border-radius:11px;
  padding:10px 13px;cursor:pointer;font-weight:680;font-size:.82rem;transition:.15s ease;
  box-shadow:var(--shadow-soft)
}
.qr-studio-tool .btn:hover{transform:translateY(-1px);border-color:#b9c6d5;background:#fbfcfe}
.qr-studio-tool .btn.primary{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(95,156,255,.22)}
.qr-studio-tool .btn.primary:hover{background:#4e8ff5;border-color:#4e8ff5}
.qr-studio-tool .btn.danger{color:#c94f5c}
.qr-studio-tool .btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}

.qr-studio-tool /* Preview */
.preview-panel{position:sticky;top:20px}
.qr-studio-tool .preview-shell{padding:20px}
.qr-studio-tool .preview-stage{
  min-height:500px;border:1px solid var(--line);border-radius:17px;background:#f3f6fa;
  display:grid;place-items:center;padding:28px;position:relative;overflow:hidden
}
.qr-studio-tool .checker{background-color:#e9edf2;background-image:linear-gradient(45deg,#d8dde4 25%,transparent 25%),linear-gradient(-45deg,#d8dde4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8dde4 75%),linear-gradient(-45deg,transparent 75%,#d8dde4 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.qr-studio-tool .canvas-wrap{width:min(100%,520px);aspect-ratio:1;display:grid;place-items:center}
.qr-studio-tool .canvas-wrap canvas{width:100%;height:100%;display:block;border-radius:8px;box-shadow:0 4px 18px rgba(23,43,77,.08)}
.qr-studio-tool .empty-preview{color:var(--muted);text-align:center;max-width:260px;line-height:1.5}
.qr-studio-tool .empty-preview strong{color:var(--text);display:block;margin-bottom:5px}
.qr-studio-tool .diag{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qr-studio-tool .metric{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px;box-shadow:var(--shadow-soft)}
.qr-studio-tool .metric span{display:block;color:var(--muted);font-size:.67rem;text-transform:uppercase;letter-spacing:.07em}
.qr-studio-tool .metric strong{display:block;margin-top:4px;font-size:.85rem;color:var(--text)}
.qr-studio-tool .safety{margin-top:10px;border:1px solid var(--line);border-radius:13px;padding:12px 13px;display:flex;align-items:flex-start;gap:11px;background:#fff}
.qr-studio-tool .safety-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--good);box-shadow:0 0 0 4px rgba(46,159,103,.08)}
.qr-studio-tool .safety.good .safety-dot{background:var(--good)}.qr-studio-tool .safety.warn .safety-dot{background:var(--warn)}.qr-studio-tool .safety.bad .safety-dot{background:var(--bad)}
.qr-studio-tool .safety strong{display:block;font-size:.82rem}.qr-studio-tool .safety p{margin:3px 0 0;color:var(--muted);font-size:.75rem;line-height:1.4}
.qr-studio-tool .payload-box{margin-top:10px;border:1px solid var(--line);background:#f8fafc;border-radius:11px;padding:10px;font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:#637187;max-height:110px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.qr-studio-tool .export-bar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.qr-studio-tool .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);font-size:.8rem;transition:.2s ease;z-index:50;color:var(--text)}
.qr-studio-tool .toast.show{opacity:1;transform:translate(-50%,0)}
.qr-studio-tool .footer-note{text-align:center;color:#8b97a8;font-size:.72rem;margin-top:20px}
.qr-studio-tool .hidden{display:none!important}
.qr-studio-tool .small-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}

@media(max-width:1080px){
  .qr-studio-tool .workspace{grid-template-columns:1fr}.qr-studio-tool .preview-panel{position:relative;top:auto}
  .qr-studio-tool .preview-stage{min-height:440px}.qr-studio-tool .type-grid{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:720px){
  .qr-studio-tool .app{padding:16px 12px 40px}.qr-studio-tool .topbar{align-items:flex-start}.qr-studio-tool .top-actions{display:none}
  .qr-studio-tool .panel-body,.qr-studio-tool .preview-shell{padding:14px}.qr-studio-tool .type-grid{grid-template-columns:repeat(3,1fr)}
  .qr-studio-tool .fields,.qr-studio-tool .color-grid,.qr-studio-tool .two-col{grid-template-columns:1fr}.qr-studio-tool .field-row.full{grid-column:auto}
  .qr-studio-tool .preview-stage{padding:16px;min-height:330px}.qr-studio-tool .diag{grid-template-columns:1fr 1fr}
  .qr-studio-tool .export-bar{grid-template-columns:1fr}.qr-studio-tool .shape-grid{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:430px){
  .qr-studio-tool .type-grid{grid-template-columns:repeat(2,1fr)}
  .qr-studio-tool .shape-grid{grid-template-columns:repeat(4,1fr)}
  .qr-studio-tool .brand h1{font-size:1.05rem}
}

.qr-studio-tool /* ==========================================================
   LIGHT THEME DEPTH PASS
   Restores dimensional cues from the original dark interface
   while preserving the clean white/light visual language.
   ========================================================== */
:root{
  --accent:#655cff;
  --accent2:#4f9bff;
  --accent-blue:#5d9cff;
  --accent-soft:#f1f3ff;
  --shadow:0 18px 46px rgba(29,48,77,.09),0 2px 8px rgba(29,48,77,.035);
  --shadow-soft:0 5px 15px rgba(31,48,73,.07),0 1px 3px rgba(31,48,73,.04);
  --shadow-lift:0 12px 26px rgba(69,91,135,.14),0 2px 5px rgba(27,41,66,.06);
}

.qr-studio-tool{
  background:
    radial-gradient(circle at 15% -6%,rgba(101,92,255,.13),transparent 28%),
    radial-gradient(circle at 96% 5%,rgba(79,155,255,.11),transparent 25%),
    linear-gradient(180deg,#fbfcff 0%,#f5f8fc 48%,#f3f6fa 100%);
  background-attachment:fixed;
}

.qr-studio-tool /* Bring back the branded QR tile and its glow. */
.mark{
  position:relative;
  border:0;
  color:#fff;
  background:linear-gradient(145deg,#7564ff 0%,#5f83ff 48%,#4fa6ff 100%);
  box-shadow:
    0 13px 30px rgba(90,93,255,.25),
    0 3px 8px rgba(47,76,155,.12),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.qr-studio-tool .mark::before{
  content:"";
  position:absolute;
  inset:-14px;
  z-index:-1;
  border-radius:24px;
  background:radial-gradient(circle,rgba(105,91,255,.18),transparent 68%);
  filter:blur(2px);
}
.qr-studio-tool .mark svg{filter:drop-shadow(0 1px 1px rgba(42,57,125,.2))}

.qr-studio-tool /* Layer the main panels instead of leaving them as flat white sheets. */
.panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(252,253,255,.98) 100%);
  border-color:#dce3eb;
  box-shadow:
    0 22px 54px rgba(38,55,84,.09),
    0 3px 10px rgba(38,55,84,.035),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.qr-studio-tool .panel-head{
  background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);
}

.qr-studio-tool /* Chips get a tiny highlight and floor shadow. */
.pill,.qr-studio-tool .status-badge{
  background:linear-gradient(180deg,#fff 0%,#f8faff 100%);
  box-shadow:0 4px 12px rgba(36,53,79,.06),inset 0 1px 0 #fff;
}

.qr-studio-tool /* Content choices: neutral buttons read as raised; active reads as selected. */
.type-btn{
  background:linear-gradient(180deg,#ffffff 0%,#f9fbfd 100%);
  border-color:#d9e0e9;
  box-shadow:0 2px 5px rgba(37,53,77,.035),inset 0 1px 0 rgba(255,255,255,.9);
}
.qr-studio-tool .type-btn:hover{
  border-color:#bfcbe0;
  background:linear-gradient(180deg,#fff 0%,#f5f8ff 100%);
  box-shadow:0 8px 18px rgba(46,68,105,.09),inset 0 1px 0 #fff;
}
.qr-studio-tool .type-btn.active{
  color:#283152;
  border-color:#6a70f7;
  background:
    radial-gradient(circle at 16% 0%,rgba(255,255,255,.85),transparent 34%),
    linear-gradient(145deg,#f4efff 0%,#eef5ff 54%,#e8f2ff 100%);
  box-shadow:
    0 8px 18px rgba(91,93,235,.13),
    inset 0 0 0 1px rgba(107,101,247,.11),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.qr-studio-tool .type-btn.active strong{color:#151d37}

.qr-studio-tool /* Input fields should feel inset into the surface. */
.control{
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
  box-shadow:inset 0 1px 2px rgba(37,53,77,.035),0 1px 0 #fff;
}
.qr-studio-tool .control:hover{box-shadow:inset 0 1px 2px rgba(37,53,77,.045),0 2px 6px rgba(40,57,84,.035)}
.qr-studio-tool .control:focus{
  border-color:#6a91ff;
  box-shadow:0 0 0 3px rgba(95,133,255,.13),0 5px 14px rgba(59,92,167,.07);
}

.qr-studio-tool /* Closed accordions have a top highlight and soft lower edge. */
.accordion{
  background:linear-gradient(180deg,#fff 0%,#fafcff 100%);
  border-color:#dce3ec;
  box-shadow:0 2px 6px rgba(38,55,82,.028),inset 0 1px 0 #fff;
}
.qr-studio-tool .accordion:hover{
  border-color:#c8d3e2;
  box-shadow:0 7px 18px rgba(37,55,85,.065),inset 0 1px 0 #fff;
}
.qr-studio-tool .accordion summary{background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)}
.qr-studio-tool .accordion[open]{
  border-color:#ccd7e5;
  box-shadow:0 10px 22px rgba(38,55,84,.065),inset 0 1px 0 #fff;
}

.qr-studio-tool /* Segments and shape choices match the content-button depth language. */
.seg-btn,.qr-studio-tool .shape-btn{
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  box-shadow:0 2px 5px rgba(37,53,77,.035),inset 0 1px 0 #fff;
}
.qr-studio-tool .seg-btn.active,.qr-studio-tool .shape-btn.active{
  border-color:#7475f5;
  background:linear-gradient(145deg,#f4efff,#eaf3ff);
  box-shadow:0 7px 16px rgba(91,93,235,.11),inset 0 0 0 1px rgba(103,99,242,.09);
}

.qr-studio-tool /* General buttons retain a real surface,.qr-studio-tool while primary action gets the original punch. */
.btn{
  background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%);
  border-color:#d5dee8;
  box-shadow:0 4px 10px rgba(35,52,79,.065),inset 0 1px 0 #fff;
}
.qr-studio-tool .btn:hover{
  background:linear-gradient(180deg,#fff 0%,#f2f6fb 100%);
  border-color:#c3cedb;
  box-shadow:0 8px 16px rgba(35,52,79,.09),inset 0 1px 0 #fff;
}
.qr-studio-tool .btn.primary{
  border-color:transparent;
  background:linear-gradient(135deg,#725cff 0%,#5f73ff 45%,#4f9bff 100%);
  color:#fff;
  box-shadow:
    0 11px 24px rgba(84,91,245,.24),
    0 3px 7px rgba(61,78,173,.12),
    inset 0 1px 0 rgba(255,255,255,.36);
}
.qr-studio-tool .btn.primary:hover{
  background:linear-gradient(135deg,#6953f5 0%,#5570f7 45%,#468ff2 100%);
  border-color:transparent;
  box-shadow:0 14px 28px rgba(84,91,245,.29),0 4px 9px rgba(61,78,173,.13),inset 0 1px 0 rgba(255,255,255,.38);
}
.qr-studio-tool .btn.primary:active{transform:translateY(0);box-shadow:0 6px 14px rgba(84,91,245,.2),inset 0 1px 2px rgba(45,50,135,.15)}

.qr-studio-tool /* Preview gets a softly recessed workstation rather than a plain gray rectangle. */
.preview-stage{
  border-color:#d9e1eb;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,255,255,.96),rgba(255,255,255,.35) 44%,transparent 70%),
    linear-gradient(145deg,#f3f7fc 0%,#edf2f8 100%);
  box-shadow:inset 0 1px 2px rgba(45,63,91,.055),inset 0 0 0 1px rgba(255,255,255,.65);
}
.qr-studio-tool .canvas-wrap canvas{
  box-shadow:0 18px 38px rgba(41,57,82,.13),0 3px 9px rgba(41,57,82,.06);
}
.qr-studio-tool .metric,.qr-studio-tool .safety,.qr-studio-tool .payload-box{
  background:linear-gradient(180deg,#fff 0%,#f9fbfd 100%);
  border-color:#dce3eb;
  box-shadow:0 3px 9px rgba(37,53,77,.04),inset 0 1px 0 #fff;
}
.qr-studio-tool .safety-dot{box-shadow:0 0 0 4px rgba(46,159,103,.08),0 0 14px currentColor}

.qr-studio-tool /* Small polish for color swatches and upload areas. */
.color-control input[type=color],.qr-studio-tool .num-badge,.qr-studio-tool .logo-drop{
  box-shadow:0 3px 9px rgba(37,53,77,.04),inset 0 1px 0 #fff;
}
.qr-studio-tool .logo-drop{background:linear-gradient(180deg,#fbfdff 0%,#f6f9fc 100%)}
.qr-studio-tool .logo-drop:hover{box-shadow:0 8px 18px rgba(54,82,132,.07),inset 0 1px 0 #fff}

/* ==========================================================
   PORTABLE SITE THEME BRIDGE
   Site themes can replace any --site-tool-* token. FX:Scape's
   existing --fx-* tokens are used automatically when present.
   ========================================================== */
.qr-studio-tool{
  --bg:var(--site-tool-bg,var(--fx-bg,#f7f9fc));
  --panel:var(--site-tool-surface,var(--fx-surface,#ffffff));
  --panel2:var(--site-tool-surface-raised,var(--fx-surface-2,#f4f7fb));
  --field:var(--site-tool-control,var(--fx-bg-deep,#ffffff));
  --text:var(--site-tool-text,var(--fx-text,#13213a));
  --muted:var(--site-tool-muted,var(--fx-muted,#74839a));
  --line:var(--site-tool-line,var(--fx-line,#dfe4ea));
  --line-strong:var(--site-tool-line-strong,var(--fx-line-strong,#cfd6df));
  --accent:var(--site-tool-accent,var(--fx-primary,#5f9cff));
  --accent2:var(--site-tool-accent-hover,var(--fx-primary-2,#4f9bff));
  --accent-ink:var(--site-tool-accent-ink,var(--fx-primary-ink,#07111b));
  --accent-soft:var(--site-tool-accent-soft,rgba(99,200,255,.12));
  --shadow:var(--site-tool-shadow,var(--fx-shadow,0 18px 46px rgba(29,48,77,.09)));
  --shadow-soft:var(--site-tool-shadow-soft,0 5px 15px rgba(0,0,0,.12));
  color-scheme:var(--site-tool-color-scheme,light);
  background:var(--bg);
  background-attachment:initial;
  color:var(--text);
  font-family:var(--site-tool-font,var(--fx-font,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif));
  font-size:16px;
  line-height:1.5;
}
body[data-site-key="fxscape"] .qr-studio-tool{color-scheme:dark}
.qr-studio-page>.fx-site-footer,.qr-studio-page>.site-footer{margin-top:0}

.qr-studio-tool .app{padding-top:clamp(24px,4vw,54px);padding-bottom:clamp(40px,6vw,78px)}
.qr-studio-tool .topbar{margin-bottom:clamp(22px,3vw,34px)}
.qr-studio-tool .brand h1{font-size:clamp(1.16rem,1.5vw,1.4rem)}
.qr-studio-tool .brand p,.qr-studio-tool .panel-head p{font-size:.9rem;line-height:1.45}
.qr-studio-tool .panel-head h2{font-size:1.12rem}
.qr-studio-tool .field-row label,.qr-studio-tool .check{font-size:.875rem;color:var(--text)}
.qr-studio-tool .hint,.qr-studio-tool .subhead span,.qr-studio-tool .logo-drop span,.qr-studio-tool .safety p{font-size:.78rem}
.qr-studio-tool .type-btn strong,.qr-studio-tool .subhead h3,.qr-studio-tool .logo-drop strong,.qr-studio-tool .btn,.qr-studio-tool .safety strong{font-size:.875rem}
.qr-studio-tool .type-btn span{font-size:.75rem}
.qr-studio-tool .section-label,.qr-studio-tool .footer-note{color:var(--muted)}

.qr-studio-tool .panel,
.qr-studio-tool .panel-head,
.qr-studio-tool .accordion,
.qr-studio-tool .accordion summary,
.qr-studio-tool .acc-body{
  background:var(--panel);
  border-color:var(--line);
}
.qr-studio-tool .panel{box-shadow:var(--shadow)}
.qr-studio-tool .subsection+.subsection{border-color:var(--line)}
.qr-studio-tool .pill,
.qr-studio-tool .status-badge,
.qr-studio-tool .type-btn,
.qr-studio-tool .seg-btn,
.qr-studio-tool .shape-btn,
.qr-studio-tool .num-badge,
.qr-studio-tool .btn,
.qr-studio-tool .metric,
.qr-studio-tool .safety,
.qr-studio-tool .payload-box,
.qr-studio-tool .toast{
  background:var(--panel2);
  border-color:var(--line);
  color:var(--text);
  box-shadow:var(--shadow-soft);
}
.qr-studio-tool .control{
  background:var(--field);
  border-color:var(--line);
  color:var(--text);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14);
}
.qr-studio-tool .control::placeholder{color:var(--muted)}
.qr-studio-tool .control:hover,.qr-studio-tool .accordion:hover,.qr-studio-tool .type-btn:hover,.qr-studio-tool .shape-btn:hover,.qr-studio-tool .seg-btn:hover,.qr-studio-tool .btn:hover{border-color:var(--line-strong)}
.qr-studio-tool .control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.qr-studio-tool .type-btn.active,
.qr-studio-tool .seg-btn.active,
.qr-studio-tool .shape-btn.active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--text);
  box-shadow:inset 0 0 0 1px var(--accent-soft);
}
.qr-studio-tool .type-btn.active strong{color:var(--text)}
.qr-studio-tool .type-btn:hover:not(.active){
  background:color-mix(in srgb,var(--panel2) 94%,var(--accent) 6%);
  color:var(--text);
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.qr-studio-tool .type-btn.active:hover{
  background:var(--accent-soft);
  color:var(--text);
}
.qr-studio-tool .shape-icon{background:var(--text)}
.qr-studio-tool .mark{
  color:var(--accent-ink);
  background:linear-gradient(145deg,var(--accent),var(--accent2));
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.qr-studio-tool .mark::before{background:radial-gradient(circle,var(--accent-soft),transparent 68%)}
.qr-studio-tool .btn.primary{
  color:var(--accent-ink);
  border-color:var(--accent);
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 9px 20px rgba(0,0,0,.2);
}
.qr-studio-tool .btn.primary:hover{color:var(--accent-ink);border-color:var(--accent2);background:var(--accent2)}
.qr-studio-tool .logo-drop{background:var(--panel2);border-color:var(--line-strong);box-shadow:none}
.qr-studio-tool .logo-drop:hover{background:var(--accent-soft);border-color:var(--accent);box-shadow:none}
.qr-studio-tool .logo-thumb,.qr-studio-tool .color-control input[type=color]{background:var(--field);border-color:var(--line);box-shadow:none}
.qr-studio-tool .preview-stage{background:var(--panel2);border-color:var(--line);box-shadow:inset 0 1px 2px rgba(0,0,0,.14)}
.qr-studio-tool .payload-box{color:var(--muted)}
.qr-studio-tool .text-btn{color:var(--accent)}

@media(max-width:720px){
  .qr-studio-tool{font-size:15px}
  .qr-studio-tool .app{padding-top:22px}
}