body,html{margin:0;padding:0}.nav-bar{background-color:#57a79a;color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box}.logo-container{display:flex;align-items:center}.github-logo{width:40px;height:40px;margin-right:15px;color:#fff;font-size:36px}.app-title{font-size:24px;font-weight:700;color:#fff;margin:0}.app-subtitle{font-size:14px;color:#ffffffe6;margin:0}.nav-links{display:flex;gap:20px}.nav-link{color:#fff;text-decoration:none;font-weight:700;font-size:14px}.nav-link:hover{text-decoration:underline}.container{display:flex;flex-direction:column;width:100%;margin:0;padding:0;font-size:12px;font-family:Arial,sans-serif;min-height:100vh}.qr-content{display:flex;flex-direction:row;max-width:1200px;margin:20px auto;width:100%;padding:0 15px;box-sizing:border-box}.left-panel{width:50%;padding:10px;box-sizing:border-box;display:flex;align-items:center}.right-panel{width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.card{background:white;border-radius:4px;box-shadow:0 1px 3px #0000001f;overflow:hidden;width:100%}.section{border-bottom:1px solid #eee}.section-header{display:flex;align-items:center;padding:8px 10px;cursor:pointer;background:#f7f7f7}.section-icon{margin-right:5px;font-size:14px}.section-title{font-size:12px;font-weight:700;margin:0;flex-grow:1}.section-toggle{font-size:14px}.section-content{padding:10px}.label{display:block;font-size:11px;margin-bottom:3px;color:#666}.margin-top{margin-top:12px}.input{width:100%;padding:5px;font-size:12px;border:1px solid #ddd;border-radius:3px;box-sizing:border-box}.color-input{width:100%;height:25px;border:1px solid #ddd;border-radius:3px}.select{width:100%;padding:5px;font-size:12px;border:1px solid #ddd;border-radius:3px}.button{width:100%;padding:8px;border:none;border-radius:3px;cursor:pointer;font-size:12px;font-weight:700;margin-top:5px}.primary-button{background-color:#57a79a;color:#fff}.secondary-button{background-color:#f0f0f0;color:#333}.button-container{padding:10px}.preview-container{display:flex;flex-direction:column;align-items:center;padding:15px;width:100%;max-width:300px}.qr-container{margin-bottom:15px;display:flex;justify-content:center;position:relative}.qr-wrapper{position:relative}.download-container{width:100%}.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.file-label{display:block;padding:5px;text-align:center;background-color:#f0f0f0;border-radius:3px;cursor:pointer;margin-bottom:5px;font-size:12px}.file-input{display:none}.color-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:8px}.preset{height:25px;border-radius:3px;cursor:pointer;overflow:hidden;border:1px solid #eee}.preset-sample{width:50%;height:8px;margin:3px auto}.preset-active{border:2px solid #2196f3}.empty-state{text-align:center;color:#999;padding:15px;font-size:11px}.empty-icon{font-size:24px;margin-bottom:5px}.size-text{font-size:11px;color:#999;margin:8px 0}.frame-style-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.frame-option{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:6px;border-radius:4px;border:1px solid #ddd;transition:all .2s ease}.frame-option.selected{border-color:#57a79a;background-color:#57a79a1a}.frame-option span{font-size:10px;color:#666;margin-top:3px;text-align:center}.frame-preview{width:40px;height:40px;background-color:#f5f5f5;margin:0 auto;display:flex;align-items:center;justify-content:center;background-repeat:no-repeat;background-position:center;background-size:contain}.frame-none{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='10' y='10' width='20' height='20' fill='%23333'/%3E%3C/svg%3E")}.frame-simple{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='5' y='5' width='30' height='30' stroke='%23333' stroke-width='2' fill='none'/%3E%3Crect x='10' y='10' width='20' height='20' fill='%23333'/%3E%3C/svg%3E")}.frame-rounded{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='5' y='5' width='30' height='30' rx='6' stroke='%23333' stroke-width='2' fill='none'/%3E%3Crect x='10' y='10' width='20' height='20' fill='%23333'/%3E%3C/svg%3E")}.frame-fancy{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='5' y='5' width='30' height='30' stroke='%23333' stroke-width='2' fill='none'/%3E%3Ccircle cx='5' cy='5' r='2' fill='%23333'/%3E%3Ccircle cx='35' cy='5' r='2' fill='%23333'/%3E%3Ccircle cx='5' cy='35' r='2' fill='%23333'/%3E%3Ccircle cx='35' cy='35' r='2' fill='%23333'/%3E%3Crect x='10' y='10' width='20' height='20' fill='%23333'/%3E%3C/svg%3E")}.frame-style-simple{border:4px solid #000;padding:15px;border-radius:0}.frame-style-rounded{border:4px solid #000;border-radius:15px;padding:15px}.frame-style-fancy{position:relative;border:3px solid #000;padding:15px}.corner{position:absolute;width:10px;height:10px;background:#000;border-radius:50%;z-index:2}.corner.top-left{top:-5px;left:-5px}.corner.top-right{top:-5px;right:-5px}.corner.bottom-left{bottom:-5px;left:-5px}.corner.bottom-right{bottom:-5px;right:-5px}