@layer tokens,base,components;@layer tokens{:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-primary: #3399f8;--color-primary-hover: #1d4ed8;--color-primary-soft: rgba(51, 153, 248, .1);--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--scrollbar-thumb-light: #cbd5e1;--scrollbar-thumb-dark: #334155;--color-bg-main: #f5f7f8;--color-bg-surface: #ffffff;--color-bg-muted: #f8fafc;--color-bg-hover: #f1f5f9;--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-text-muted: #64748b;--color-text-disabled: #94a3b8;--color-border-default: #e2e8f0;--color-border-strong: #cbd5e1;--color-info-bg: #eff6ff;--color-info-border: #dbeafe}.dark{color-scheme:dark;--color-bg-main: #0f1923;--color-bg-surface: #151c2b;--color-bg-muted: #020617;--color-bg-hover: #1e293b;--color-text-primary: #ffffff;--color-text-secondary: #cbd5f5;--color-text-muted: #94a3b8;--color-text-disabled: #64748b;--color-border-default: #1e293b;--color-border-strong: #334155;--color-info-bg: rgba(30, 58, 138, .2);--color-info-border: rgba(30, 58, 138, .5)}}@layer base{*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg-main);color:var(--color-text-primary);margin-inline:auto;min-width:10dvw;min-height:100dvh;overflow-x:hidden}.main{display:flex;gap:1rem;height:100%}.container{max-width:80rem;width:100%;margin-inline:auto}.image-container{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-hover);border-radius:.25rem}.image-container img{width:1.5rem}.divider{border:none;border-top:1px solid var(--color-border-default)}}@layer components{.btn{border:none;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer}.btn-primary{background-color:var(--color-primary)}.btn-download{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.btn-download span{font-size:1rem}.btn-download img{width:1.25rem}}@layer components{.header{background-color:var(--color-bg-surface);padding:1rem 2rem;border-bottom:1px solid var(--color-border-default);display:flex;justify-content:space-between;align-items:center}.header .logo{display:flex;align-items:center;gap:1rem}.header .logo h1{font-size:1.5rem}}@layer components{.aside{padding:1rem 2rem 2rem;display:flex;flex-direction:column;gap:3rem;overflow:hidden;border-right:1px solid var(--color-border-default);background-color:var(--color-bg-surface);min-height:100%;max-width:30rem;width:100%}.aside .aside-options{display:flex;gap:1rem;margin-block:1rem}.aside .aside-options .btn{display:flex;background-color:var(--color-bg-hover);cursor:pointer;gap:.5rem}.aside .aside-options .btn img{width:1rem}.aside .aside-options .btn input{display:none}.aside .aside-options .btn.active{background-color:var(--color-primary);color:#fff}.aside .input-container{margin-top:2rem;display:flex;flex-direction:column;gap:.5rem}.aside .input-container .input-group{margin-top:.5rem;display:flex;flex-direction:column;gap:.5rem}.aside .input-container .input-group input,.aside .input-container .input-group textarea,.aside .input-container .input-group select{padding:1rem;border-radius:.5rem;border:1px solid var(--color-border-default);background-color:var(--color-bg-main);font-size:1rem;width:100%;font-family:inherit}.aside .input-container .input-group button{font-size:1rem}.aside .input-container button{font-size:1rem;padding:.75rem;margin-top:.5rem}.aside .config-container{background-color:var(--color-bg-main);border:1px solid var(--color-border-default);border-radius:.5rem}.aside .config-container.collapsed .config-body{max-height:0;opacity:0;padding:0 1rem}.aside .config-container.collapsed .chevron{transform:rotate(180deg)}.aside .config-container .config-header{display:flex;align-items:center;gap:.5rem;padding:1rem;border-bottom:1px solid var(--color-border-default);cursor:pointer;width:100%;justify-content:space-between}.aside .config-container .config-header .config-header-container{display:flex;align-items:center;gap:.5rem}.aside .config-container .config-header .config-header-container img{width:1.5rem}.aside .config-container .config-header .config-header-container h2{font-size:1.25rem;font-weight:700}.aside .config-container .config-header .chevron{transition:transform .3s ease}.aside .config-container .config-body{padding:1rem;color:var(--color-text-muted);display:flex;flex-direction:column;gap:1rem}.aside .config-container .config-body .config-color-container{display:flex;justify-content:space-between;gap:.5rem}.aside .config-container .config-body .config-color-container .config-color{display:flex;flex-direction:column;width:100%;gap:.5rem}.aside .config-container .config-body .config-color-container .config-color .color-input-container{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:.5rem;background-color:var(--color-bg-hover)}.aside .config-container .config-body .config-color-container .config-color .color-input-container input[type=color]{width:2rem;border:none}.aside .config-container .config-body .config-color-container .config-color .color-input-container input[type=text]{border:none;background-color:transparent;color:var(--color-text-primary);width:100%;outline:none;font-size:1rem}.aside .config-container .config-body .config-detail-container{display:flex;flex-direction:column;gap:.5rem}.aside .config-container .config-body .config-detail-container .config-detail{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.aside .config-container .config-body .config-detail-container .config-detail input{width:100%}.aside .config-container .config-body .config-logo-container{display:flex;flex-direction:column;gap:.5rem}.aside .config-container .config-body .config-logo-container input::file-selector-button{background-color:var(--color-primary);color:#fff;padding:.75rem 1.5rem;border:none;border-radius:.5rem;cursor:pointer;font-weight:700;font-size:1rem;transition:background-color .3s}}@layer components{.preview-container{display:flex;flex-direction:column;gap:2rem;margin:3rem auto;height:100%}.preview-container .preview-header{display:flex;justify-content:space-between;align-items:center}.preview-container .preview-header .preview-header-title{display:flex;align-items:center;gap:.5rem}.preview-container .preview-header .preview-header-size{font-size:.875rem;background-color:var(--color-bg-hover);padding:.25rem 1rem;border-radius:.5rem;border:1px solid var(--color-border-strong);color:var(--color-text-secondary)}.preview-container .qr-container{display:flex;justify-content:center;align-items:center;padding:1rem;border-radius:1rem;background-color:#fff;border:1px solid var(--color-border-default);min-height:500px;margin-block:2rem;width:100%;height:100%}.preview-container .footer-divider{width:2px;height:1.5rem;background-color:var(--color-border-default)}.preview-container .preview-footer{display:flex;justify-content:space-between;align-items:center;background-color:var(--color-bg-surface);padding:1rem;border-radius:.5rem;border:1px solid var(--color-border-default)}.preview-container .preview-footer .share-options{display:flex;gap:1rem;align-items:center}.preview-container .preview-footer .share-options .btn-copy{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--color-border-default);background-color:var(--color-bg-hover);color:var(--color-text-primary);font-size:1rem}.preview-container .preview-footer .share-options .btn-copy img{width:1.5rem;filter:invert(.5)}.preview-container .preview-footer .share-options .copy-feedback{font-size:.875rem;color:var(--color-text-secondary)}.preview-container .preview-footer .format-options{display:flex;gap:.5rem}.preview-container .preview-footer .format-options .btn{display:flex;background-color:var(--color-bg-hover);cursor:pointer;gap:.5rem}.preview-container .preview-footer .format-options .btn input{display:none}.preview-container .preview-footer .format-options .btn.active{background-color:var(--color-primary);color:#fff}.preview-container .preview-info{display:flex;justify-content:flex-start;align-items:flex-start;gap:1rem;padding:1rem;border-radius:.5rem;background-color:var(--color-info-bg);border:1px solid var(--color-info-border)}.preview-container .preview-info p{color:var(--color-text-secondary)}}