/* FilesFi v1 — QR builder styles appended. */
/* QR type picker grid */
#qrTypes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { #qrTypes { grid-template-columns: repeat(4, 1fr); } }
.qr-type { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: 16px; border: 2px solid #e2e8f0; background: #fff; cursor: pointer; transition: all .15s ease; text-align: center; }
.qr-type svg { width: 30px; height: 30px; color: #4f46e5; }
.qr-type-label { font-weight: 700; font-size: 15px; color: #1e293b; }
.qr-type-hint { font-size: 11px; color: #64748b; line-height: 1.3; }
.qr-type:hover { border-color: #a5b4fc; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.12); }
.qr-type.selected { border-color: #4f46e5; background: #eef2ff; box-shadow: 0 4px 14px rgba(79,70,229,.22); }
/* QR forms */
.qr-label { display: block; font-size: 13px; font-weight: 600; color: #475569; }
.qr-input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid #e2e8f0; font-size: 15px; background: #fff; color: #1e293b; outline: none; transition: border-color .15s; }
.qr-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.qr-note { font-size: 12px; color: #64748b; margin-top: 8px; }
.qr-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #475569; padding-top: 26px; }
.qr-status { font-size: 13px; border-radius: 12px; padding: 10px 14px; margin-top: 12px; }
.qr-status.ok { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.qr-status.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
/* step pills */
.qr-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #64748b; }
.qr-step .n { width: 26px; height: 26px; border-radius: 9999px; display: grid; place-items: center; background: #e2e8f0; color: #475569; font-size: 13px; }
/* phone mockup */
.phone { width: 270px; max-width: 100%; margin: 0 auto; background: #0f172a; border-radius: 44px; padding: 12px; box-shadow: 0 18px 44px rgba(15,23,42,.28), inset 0 0 0 2px #334155; }
.phone-screen { background: #fff; border-radius: 34px; overflow: hidden; position: relative; }
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; background: #0f172a; border-radius: 9999px; z-index: 2; }
#qrCanvas { display: grid; place-items: center; padding: 18px; background: #fff; min-height: 300px; }
#qrCanvas canvas, #qrCanvas svg { max-width: 100%; height: auto; border-radius: 8px; }
/* dark mode for QR page bits */
html.dark .qr-type { background: #1e293b; border-color: #334155; }
html.dark .qr-type-label { color: #f1f5f9; }
html.dark .qr-type.selected { background: #1e1b4b; }
html.dark .qr-label { color: #94a3b8; }
html.dark .qr-input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
html.dark .qr-check { color: #94a3b8; }
html.dark .qr-step { color: #94a3b8; }
/* FilesFi v1 — extracted from the v1 single-file build. */
html, body { height: 100%; }
  body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  .glass { background: rgba(255,255,255,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  /* Tool tab bar: horizontal scroll strip on phones, wraps to rows on desktop */
  #tabs { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #tabs .tab { flex: 0 0 auto; white-space: nowrap; }
  @media (min-width: 640px) {
    #tabs { flex-wrap: wrap; overflow: visible; }
    #tabs .tab { flex: 1 1 calc(20% - 5px); white-space: normal; }
  }
  #dropzone { transition: border-color .15s ease, background .15s ease, transform .15s ease; }
  #dropzone.drag { border-color: #6366f1; background: #eef2ff; transform: scale(1.01); }
  .tab { transition: all .15s ease; }
  .tab.active { background: #4f46e5; color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,.35); }
  .tbtn { transition: all .12s ease; }
  .tbtn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(79,70,229,.25); }
  .tbtn.selected { background: #4f46e5; color: #fff; border-color: #4f46e5; }
  .tbtn:disabled { opacity: .45; cursor: not-allowed; }
  .fade-in { animation: fadeIn .25s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .soc{width:38px;height:38px;border-radius:9999px;border:1px solid #e2e8f0;background:#fff;display:grid;place-items:center;color:#4f46e5;transition:box-shadow .15s,border-color .15s,transform .15s}
  .soc:hover{border-color:#4f46e5;box-shadow:0 0 14px rgba(79,70,229,.4);transform:translateY(-2px)}
  .soc svg{width:18px;height:18px}
  .flink{color:#475569}
  .flink:hover{color:#4f46e5}
  .safe-center { justify-content: safe center; }
  .checker{background-image:conic-gradient(#e2e8f0 25%, #ffffff 0 50%, #e2e8f0 0 75%, #ffffff 0);background-size:18px 18px;}
  html.dark .checker{background-image:conic-gradient(#334155 25%, #1e293b 0 50%, #334155 0 75%, #1e293b 0);}
  .cmp-handle{position:absolute;top:0;bottom:0;width:2px;background:#4f46e5;pointer-events:none}
  .cmp-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:9999px;background:#4f46e5;color:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.3);font-size:14px}
  .prog{height:8px;border-radius:9999px;background:#e2e8f0;overflow:hidden}
  .prog > div{height:100%;background:#4f46e5;border-radius:9999px;transition:width .2s ease}
  html.dark{color-scheme:dark}
  html.dark .glass{background:rgba(15,23,42,.82)}
  html.dark .soc{background:#1e293b;border-color:#334155;color:#818cf8}
  html.dark .flink{color:#94a3b8}
  html.dark .modal-pane{color:#cbd5e1}
  html.dark .modal-pane h3{color:#f1f5f9}
  html.dark .modal-pane code{background:#1e293b}
  html.dark .tbtn:not(:disabled){background:#1e293b;border-color:#334155;color:#e2e8f0}
  html.dark #dropzone.drag{background:#1e1b4b;border-color:#818cf8}
  html.dark #panel,html.dark #output{color:#cbd5e1}
  html.dark #panel .text-slate-500,html.dark #output .text-slate-500{color:#94a3b8}
  html.dark #panel .text-slate-400,html.dark #output .text-slate-400{color:#64748b}
  html.dark #panel .bg-slate-100{background-color:#1e293b}
  html.dark .prog{background:#334155}
  input[type=range].px-range{-webkit-appearance:none;appearance:none;height:6px;border-radius:9999px;background:#e2e8f0;outline:none}
  input[type=range].px-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:9999px;background:#4f46e5;cursor:pointer;box-shadow:0 2px 6px rgba(79,70,229,.4)}
  input[type=range].px-range::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:9999px;background:#4f46e5;cursor:pointer}
  html.dark input[type=range].px-range{background:#334155}