:root{--primary: #7F5AF0;--primary-hover: #6246ea;--background: #16161a;--surface: #242629;--text: #fffffe;--text-secondary: #94a1b2;--border: #383a42;--danger: #ef4565;--glass-bg: rgba(36, 38, 41, .8);--glass-border: rgba(255, 255, 255, .1);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 24px;--font-main: "Outfit", sans-serif;--sidebar-width: 280px;--nav-height: 64px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-main);background-color:var(--background);color:var(--text);height:100vh;overflow:hidden}#app{display:flex;height:100vh;width:100vw}h1,h2,h3{font-weight:600}button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}.hidden{display:none!important}.btn{padding:12px 24px;border-radius:var(--radius-md);font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:active{transform:scale(.98)}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}.btn-outline{border:1px solid var(--primary);color:var(--primary)}.btn-text{color:var(--text-secondary)}.btn-full{width:100%}.sidebar{width:var(--sidebar-width);background:var(--surface);display:flex;flex-direction:column;padding:24px;border-right:1px solid var(--border)}.brand{display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:700;margin-bottom:40px;color:var(--primary)}.desktop-nav{display:flex;flex-direction:column;gap:8px;flex:1}.desktop-nav .nav-item{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--radius-md);color:var(--text-secondary);transition:.2s}.desktop-nav .nav-item:hover{background:#ffffff0d;color:var(--text)}.desktop-nav .nav-item.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px #7f5af04d}.sidebar-footer{padding-top:20px;border-top:1px solid var(--border)}.main-content{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}.mobile-header,.mobile-nav{display:none}.view-section{flex:1;overflow-y:auto;width:100%;height:100%}.scanner-container{width:100%;height:100%;position:relative;background:#000}#reader{width:100%;height:100%;object-fit:cover}#reader video{object-fit:cover;width:100%;height:100%}.scanner-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:#0000004d}.scan-frame{width:250px;height:250px;border:2px solid rgba(255,255,255,.3);border-radius:24px;position:relative;box-shadow:0 0 0 4000px #00000080}.scan-frame:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border:2px solid var(--primary);border-radius:24px;clip-path:polygon(0 0,40px 0,40px 40px,0 40px,0 0,100% 0,100% 40px,calc(100% - 40px) 40px,calc(100% - 40px) 0,100% 0,100% 100%,calc(100% - 40px) 100%,calc(100% - 40px) calc(100% - 40px),100% calc(100% - 40px),100% 100%,0 100%,0 calc(100% - 40px),40px calc(100% - 40px),40px 100%,0 100%)}.scan-instruction{margin-top:24px;color:#fff;font-weight:500;background:#0009;padding:8px 16px;border-radius:20px}#scan-result-panel{position:absolute;bottom:24px;left:24px;right:24px;background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:20px;z-index:10;max-width:600px;margin:0 auto}.creator-layout{display:flex;height:100%;padding:40px;gap:40px}.config-panel{flex:1;max-width:500px;display:flex;flex-direction:column;gap:24px;overflow-y:auto}.preview-panel{flex:1;background:var(--surface);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;border:1px solid var(--border)}.input-group label,.options-group label{display:block;color:var(--text-secondary);margin-bottom:8px;font-size:.9rem}.segment-control{background:var(--surface);padding:4px;border-radius:var(--radius-md);display:flex;gap:4px}.segment{flex:1;padding:10px;border-radius:var(--radius-sm);color:var(--text-secondary)}.segment.active{background:var(--border);color:var(--text);font-weight:600}input[type=text]{width:100%;background:var(--surface);border:1px solid var(--border);padding:16px;border-radius:var(--radius-md);color:#fff;font-size:1rem;outline:none}input[type=text]:focus{border-color:var(--primary)}.row-group{display:flex;gap:12px}.row-group .half{flex:1}.color-wrapper{flex:1;display:flex;flex-direction:column;gap:8px;background:var(--surface);padding:12px;border-radius:var(--radius-md);align-items:center}.color-wrapper input[type=color]{width:100%;height:40px;cursor:pointer;border:none;background:none}.select-wrapper select{width:100%;background:var(--surface);color:#fff;border:1px solid var(--border);padding:12px;border-radius:var(--radius-md)}.file-input-wrapper input[type=file]{width:100%;background:var(--surface);padding:12px;border-radius:var(--radius-md);color:var(--text-secondary);font-size:.9rem}.file-input-wrapper input[type=file]::file-selector-button{background:var(--primary);border:none;color:#fff;padding:8px 16px;border-radius:var(--radius-sm);cursor:pointer;margin-right:12px}.checkbox-wrapper{display:flex;align-items:center;gap:12px;background:var(--surface);padding:12px;border-radius:var(--radius-md);color:var(--text)}.checkbox-wrapper input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary)}.action-row{display:flex;gap:12px}.format-select{width:100px}@media (max-width: 1100px){.creator-layout{flex-direction:column}.config-panel{max-width:100%}.preview-panel{min-height:400px;order:-1}}@media (max-width: 768px){.sidebar{display:none}.mobile-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--background);border-bottom:1px solid var(--border)}.brand-mobile{display:flex;align-items:center;gap:8px;font-size:1.2rem;font-weight:700;color:var(--primary)}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);height:var(--nav-height);z-index:100;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-secondary);font-size:.8rem}.mobile-nav .nav-item.active{color:var(--primary)}.main-content{padding-bottom:calc(var(--nav-height) + 20px)}.creator-layout{flex-direction:column;padding:20px;overflow-y:auto}.preview-panel{min-height:300px}input[type=text],select,textarea{font-size:16px!important}}.mobile-nav-menu .ant-menu-item{flex:1!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important}.text-overflow-container{word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;max-width:100%;overflow:hidden}.ant-typography{word-wrap:break-word!important;word-break:break-word!important;overflow-wrap:break-word!important}canvas,svg{max-width:100%;height:auto}