:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f5f5f7;--bg-strong:#fff;--surface:#ffffffd6;--surface-solid:#fff;--surface-soft:#f0f0f3;--text:#171719;--text-soft:#686872;--muted:#7d7d88;--border:#1010141a;--shadow:0 20px 60px #1414181f;--accent:#0a84ff;--accent-strong:#006ee6;--accent-soft:#0a84ff1f;--danger:#ff3b30;--success:#30d158;--warning:#ff9f0a;--radius-xl:28px;--radius-lg:22px;--radius-md:14px;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,sans-serif}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#08080a;--bg-strong:#111114;--surface:#1b1b1fc7;--surface-solid:#19191d;--surface-soft:#24242a;--text:#f5f5f7;--text-soft:#b4b4bd;--muted:#8f8f98;--border:#ffffff1f;--shadow:0 20px 70px #00000061;--accent:#0a84ff;--accent-strong:#409cff;--accent-soft:#0a84ff2e}*{box-sizing:border-box}html{background:var(--bg);min-height:100%}body{background:radial-gradient(circle at top left, #0a84ff1f, transparent 32rem), linear-gradient(180deg, var(--bg-strong), var(--bg));min-width:320px;min-height:100vh;color:var(--text);margin:0}button,input,textarea,select{font:inherit}button{border:0}button,select,input,textarea{-webkit-tap-highlight-color:transparent}h1,h2,h3,p{margin:0}.app-shell{min-height:100vh;padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 24px max(18px, env(safe-area-inset-left))}.topbar{z-index:20;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);max-width:1440px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);justify-content:space-between;align-items:center;gap:16px;margin:0 auto 18px;padding:12px;display:flex;position:sticky;top:0}.brand,.topbar-actions,.field-editor-head,.section-heading,.qr-meta,.scanner-status,.capture-box,.field-toolbar,.field-add,.qr-actions,.saved-row,.packet-row{align-items:center;display:flex}.brand{gap:12px;min-width:0}.brand-mark{background:var(--accent);color:#fff;border-radius:16px;flex:none;place-items:center;width:46px;height:46px;display:grid;box-shadow:0 12px 30px #0a84ff47}.brand h1{font-size:clamp(1.25rem,1.8vw,1.65rem);line-height:1.05}.brand p{color:var(--text-soft);margin-top:3px;font-size:.94rem}.topbar-actions{gap:10px}.device-pill,.pill{border:1px solid var(--border);background:var(--surface-soft);color:var(--text-soft);white-space:nowrap;border-radius:999px;align-items:center;gap:7px;padding:9px 12px;font-size:.88rem;display:inline-flex}.layout{grid-template-columns:92px minmax(0,1fr);gap:18px;max-width:1440px;margin:0 auto;display:grid}.side-nav{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);height:fit-content;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);flex-direction:column;gap:10px;padding:10px;display:flex;position:sticky;top:96px}.nav-button,.mobile-nav-button{color:var(--text-soft);cursor:pointer;background:0 0;justify-content:center;align-items:center;transition:background .18s,color .18s,transform .18s;display:flex}.nav-button{border-radius:20px;flex-direction:column;gap:7px;min-height:72px;font-size:.78rem}.nav-button.active,.mobile-nav-button.active{background:var(--accent-soft);color:var(--accent-strong)}.nav-button:hover,.mobile-nav-button:hover{transform:translateY(-1px)}.content{min-width:0}.screen-grid{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:start;gap:18px;display:grid}.scan-screen,.data-screen{grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr)}.fill-screen{max-width:760px;margin:0 auto}.side-stack{gap:18px;display:grid}.panel{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.builder-panel,.fill-panel,.scanner-panel,.qr-panel,.answer-panel,.guide-panel,.stats-panel,.progress-panel{padding:clamp(18px,2.4vw,28px)}.section-heading{justify-content:space-between;gap:14px;margin-bottom:16px}.section-heading h2{margin-top:2px;font-size:clamp(1.18rem,2vw,1.55rem)}.eyebrow{color:var(--accent-strong);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:780}.muted{color:var(--text-soft);line-height:1.55}.empty-state{border:1px dashed var(--border);border-radius:var(--radius-lg);color:var(--text-soft);text-align:center;padding:18px}.primary-button,.secondary-button,.icon-button{cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:8px;min-height:44px;transition:transform .18s,background .18s,opacity .18s;display:inline-flex}.primary-button{background:var(--accent);color:#fff;padding:0 18px;font-weight:720;box-shadow:0 12px 24px #0a84ff38}.primary-button.compact{min-height:40px;padding:0 14px}.secondary-button{background:var(--surface-soft);color:var(--text);border:1px solid var(--border);padding:0 16px;font-weight:680}.icon-button{background:var(--surface-soft);width:44px;height:44px;color:var(--text);border:1px solid var(--border)}.icon-button.danger{color:var(--danger)}.primary-button:hover,.secondary-button:hover,.icon-button:hover{transform:translateY(-1px)}label{color:var(--text);gap:7px;font-size:.9rem;font-weight:680;display:grid}input,textarea,select{border:1px solid var(--border);background:var(--surface-solid);width:100%;min-height:44px;color:var(--text);border-radius:16px;outline:none;padding:11px 13px;transition:border-color .18s,box-shadow .18s,background .18s}textarea{resize:vertical}input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.form-grid,.field-editor-body,.fill-fields,.answer-list{gap:14px;display:grid}.saved-row{justify-content:stretch;margin-bottom:14px}.saved-row label{width:100%}.field-toolbar{justify-content:space-between;gap:14px;margin:22px 0 14px}.field-add{gap:10px}.field-add select{min-width:190px}.field-list{gap:12px;display:grid}.field-editor{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-solid);padding:14px}.field-editor-head{gap:10px;margin-bottom:14px}.field-index{background:var(--accent-soft);width:34px;height:34px;color:var(--accent-strong);border-radius:12px;flex:none;place-items:center;font-weight:760;display:grid}.field-type{max-width:190px}.field-actions{gap:6px;margin-left:auto;display:flex}.field-actions .icon-button{width:36px;height:36px;min-height:36px}.field-editor-body{grid-template-columns:repeat(2,minmax(0,1fr))}.field-editor-body .wide{grid-column:1/-1}.check-row,.option-row,.switch-row{align-items:center;gap:10px;display:flex}.check-row input,.option-row input,.switch-row input{width:auto;min-height:auto}.check-row{align-self:end;min-height:44px}.qr-list{gap:14px;margin-top:16px;display:grid}.qr-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-solid);gap:14px;padding:14px;display:grid}.qr-image-wrap{background:#fff;border-radius:18px;place-items:center;padding:14px;display:grid}.qr-image{aspect-ratio:1;object-fit:contain;width:min(100%,270px)}.qr-meta{justify-content:space-between;gap:12px}.qr-meta h3{font-size:1rem}.qr-health{color:var(--text-soft);margin-top:3px;font-size:.86rem}.qr-health.good{color:color-mix(in srgb, var(--success) 78%, var(--text))}.qr-health.warn{color:color-mix(in srgb, var(--warning) 82%, var(--text))}.qr-health.bad{color:var(--danger)}.qr-actions{gap:8px}.stats-panel h2,.guide-panel h2,.progress-panel h2{margin:4px 0 8px}.fill-panel.preview{box-shadow:none}.fill-fields{margin-top:18px}.fill-field{gap:8px;display:grid}.fill-field small{color:var(--danger)}.field-help{color:var(--muted);font-size:.86rem;line-height:1.4}.field-error{color:var(--danger);font-size:.86rem;font-weight:680}.option-stack{border:1px solid var(--border);background:var(--surface-solid);border-radius:16px;gap:8px;padding:10px;display:grid}.option-row.large{border:1px solid var(--border);background:var(--surface-solid);border-radius:16px;min-height:52px;padding:12px 14px}.switch-row{border:1px solid var(--border);background:var(--surface-solid);border-radius:16px;justify-content:space-between;min-height:56px;padding:12px 14px}.switch-row input{appearance:none;cursor:pointer;background:#c9c9cf;border:0;border-radius:999px;width:52px;height:30px;transition:background .18s;position:relative}.switch-row input:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .18s;position:absolute;top:3px;left:3px;box-shadow:0 2px 7px #0000003d}.switch-row input:checked{background:var(--success)}.switch-row input:checked:after{transform:translate(22px)}.submit-button{width:100%;margin-top:20px}.camera-frame{border-radius:var(--radius-xl);background:#111;height:clamp(360px,58vh,620px);position:relative;overflow:hidden}.scan-overlay{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.scan-reticle{aspect-ratio:1;color:#fff;border:2px solid #ffffffb8;border-radius:30px;place-items:center;width:min(62vw,280px);display:grid;box-shadow:inset 0 0 0 1px #0a84ffb8,0 0 0 999px #0000003d}.scanner-status{margin-top:14px}.status-message{color:var(--text-soft);align-items:center;gap:8px;display:inline-flex}.status-message.good{color:color-mix(in srgb, var(--success) 76%, var(--text))}.status-message.error{color:var(--danger)}.capture-box{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-solid);gap:12px;margin-top:16px;padding:14px;position:relative}.capture-box p{color:var(--text-soft);margin-top:2px;font-size:.88rem}.capture-input{opacity:0;cursor:pointer;position:absolute;inset:0}.guide-list{color:var(--text-soft);gap:10px;margin:14px 0 0;padding-left:20px;line-height:1.5;display:grid}.packet-list{gap:10px;margin-top:14px;display:grid}.packet-row{border:1px solid var(--border);background:var(--surface-solid);border-radius:16px;justify-content:space-between;gap:12px;padding:12px 14px}.packet-row span{min-width:0;color:var(--text-soft);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.answer-list{margin-top:18px}.answer-row{border:1px solid var(--border);background:var(--surface-solid);border-radius:16px;gap:5px;padding:14px;display:grid}.answer-row dt{color:var(--text-soft);font-size:.84rem;font-weight:720}.answer-row dd{overflow-wrap:anywhere;margin:0;font-weight:680}.mobile-nav{right:max(14px, env(safe-area-inset-right));bottom:max(14px, env(safe-area-inset-bottom));left:max(14px, env(safe-area-inset-left));z-index:30;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:24px;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;display:none;position:fixed}.mobile-nav-button{border-radius:18px;flex-direction:column;gap:4px;min-height:58px;font-size:.76rem}.toast{z-index:40;border:1px solid var(--border);background:var(--surface);max-width:min(420px,100vw - 44px);box-shadow:var(--shadow);color:var(--text);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:18px;padding:13px 16px;position:fixed;bottom:22px;right:22px}.toast-enter-active,.toast-leave-active{transition:opacity .18s,transform .18s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translateY(10px)}@media (width<=1120px){.layout{grid-template-columns:1fr}.side-nav{display:none}.mobile-nav{display:grid}.app-shell{padding-bottom:100px}.screen-grid,.scan-screen,.data-screen{grid-template-columns:1fr}}@media (width<=720px){.app-shell{padding-left:12px;padding-right:12px}.topbar{border-radius:24px;align-items:flex-start}.brand p,.device-pill{display:none}.brand-mark{width:42px;height:42px}.builder-panel,.fill-panel,.scanner-panel,.qr-panel,.answer-panel,.guide-panel,.stats-panel,.progress-panel{padding:16px}.field-toolbar,.field-add,.section-heading,.qr-meta{flex-direction:column;align-items:stretch}.field-add select,.field-type{max-width:none}.field-editor-head{flex-wrap:wrap;align-items:flex-start}.field-actions{width:100%;margin-left:0}.field-actions .icon-button{flex:1}.field-editor-body{grid-template-columns:1fr}.qr-actions{align-self:stretch}.qr-actions .icon-button{flex:1}.camera-frame{height:min(68vh,520px);min-height:330px}.toast{bottom:92px;left:14px;right:14px}}
