:root{--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--blue-50: #eff6ff;--blue-500: #3b82f6;--blue-600: #2563eb;--blue-700: #1d4ed8;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background-color:var(--gray-100);padding:20px;color:var(--gray-900);line-height:1.5}.container{max-width:100%;margin:0 auto}.controls{text-align:center;margin-bottom:var(--space-md);display:flex;justify-content:flex-start;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.template-selector-wrapper{display:flex;align-items:center;gap:var(--space-sm);flex:1 0 100%;width:100%;justify-content:start}.template-selector-wrapper label{font-weight:500;font-size:13px;color:var(--gray-700);letter-spacing:.01em}.template-selector{padding:10px 14px;font-size:14px;font-weight:500;border:1px solid var(--gray-300);border-radius:8px;background-color:#fff;color:var(--gray-900);cursor:pointer;transition:all var(--transition-base);min-width:150px;width:100%}.template-selector:hover{border-color:var(--blue-500);background-color:var(--gray-50)}.template-selector:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.generate-btn,.export-btn,.preview-btn,.save-template-btn,.grid-btn,.snap-btn,.zoom-btn,.upload-btn{padding:9px 16px;font-size:13px;font-weight:500;border-radius:8px;cursor:pointer;transition:all var(--transition-base);border:1px solid transparent;letter-spacing:.01em;min-height:38px;display:inline-flex;align-items:center;justify-content:center}.generate-btn{background-color:var(--blue-600);color:#fff;box-shadow:var(--shadow-sm)}.generate-btn:hover{background-color:var(--blue-700);box-shadow:var(--shadow-md);transform:translateY(-1px)}.generate-btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.generate-btn:disabled{background-color:var(--gray-300);cursor:not-allowed;transform:none}.preview-btn{background-color:var(--warning);color:#fff;box-shadow:var(--shadow-sm)}.preview-btn:hover{background-color:#d97706;box-shadow:var(--shadow-md);transform:translateY(-1px)}.preview-btn:active{transform:translateY(0)}.save-template-btn,.upload-btn{background-color:var(--success);color:#fff;box-shadow:var(--shadow-sm)}.save-template-btn:hover,.upload-btn:hover{background-color:#059669;box-shadow:var(--shadow-md);transform:translateY(-1px)}.save-template-btn:active,.upload-btn:active{transform:translateY(0)}.export-btn{background-color:#fff;color:var(--gray-700);border-color:var(--gray-300)}.export-btn:hover{background-color:var(--gray-50);border-color:var(--gray-400)}.grid-btn,.snap-btn,.zoom-btn{background-color:#fff;color:var(--gray-700);border-color:var(--gray-300);font-size:12px;padding:7px 12px;min-height:34px}.grid-btn:hover,.snap-btn:hover,.zoom-btn:hover{background-color:var(--gray-50);border-color:var(--gray-400)}.grid-btn:active,.snap-btn:active,.zoom-btn:active{background-color:var(--gray-100)}.certificate-container{position:relative;background-position:top left;background-repeat:no-repeat;margin:0 auto;border:1px solid var(--gray-300);box-shadow:var(--shadow-lg);transition:transform var(--transition-slow),box-shadow var(--transition-slow);background-color:var(--gray-50);border-radius:4px}.certificate-container:hover{box-shadow:var(--shadow-xl)}#certificateWrapper{background:#fff;position:relative;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-md)}.grid-controls{text-align:center;margin-top:var(--space-md);display:flex;justify-content:flex-start;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.grid-size-control{display:flex;align-items:center;gap:var(--space-sm)}.grid-size-control label{font-weight:500;font-size:12px;color:var(--gray-600);letter-spacing:.01em}.grid-size-control input{width:64px;padding:7px 10px;border:1px solid var(--gray-300);border-radius:6px;font-size:13px;font-weight:500;color:var(--gray-900);background-color:#fff;transition:all var(--transition-base)}.grid-size-control input:hover{border-color:var(--gray-400);background-color:var(--gray-50)}.grid-size-control input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.grid-size-control span{color:var(--gray-500);font-size:12px}.debug-surface{background:linear-gradient(135deg,#0f172a,#1e293b);color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:var(--space-md);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.6;max-height:280px;overflow:auto;box-shadow:inset 0 2px 4px #0000004d}.overlay-panel{position:fixed;top:12px;left:12px;width:max-content;max-width:calc(100% - 24px);min-width:640px;height:auto;background:#fff;border:1px solid var(--gray-200);border-radius:12px;box-shadow:var(--shadow-xl);z-index:10000;-webkit-user-select:none;user-select:none;box-sizing:border-box;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.overlay-panel.collapsed{width:auto;min-width:auto;height:auto;max-height:none;padding:0}.overlay-header{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);cursor:grab;background:linear-gradient(to bottom,var(--gray-50),white);border-bottom:1px solid var(--gray-200);-webkit-user-select:none;user-select:none;border-radius:12px 12px 0 0;transition:background var(--transition-base)}.overlay-header:hover{background:linear-gradient(to bottom,var(--gray-100),var(--gray-50))}.overlay-panel.collapsed .overlay-header{border-bottom:none;border-radius:12px}.overlay-panel.dragging .overlay-header{cursor:grabbing;background:linear-gradient(to bottom,var(--gray-100),var(--gray-50))}.overlay-header strong{font-weight:600;font-size:14px;color:var(--gray-900);letter-spacing:.01em}.overlay-content{padding:var(--space-lg);max-height:80vh;overflow:auto}.overlay-panel.collapsed .overlay-content{display:none}.overlay-header span:first-child{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--gray-500);font-size:12px;transition:transform var(--transition-base),color var(--transition-base)}.overlay-header:hover span:first-child{color:var(--gray-700)}.overlay-panel[aria-expanded=true] .overlay-header span:first-child{transform:rotate(90deg)}#debugPanel{display:none}.overlay-initial{visibility:hidden}@media(max-width:900px){.overlay-panel{left:12px;right:12px;width:auto}}.vp-scope{all:revert;font-size:13px;color:var(--gray-900)}.ctrl-row{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.ctrl-row-gap{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--gray-200)}.ctrl-input{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--gray-300);border-radius:8px;font-size:13px;font-weight:400;color:var(--gray-900);background-color:#fff;transition:all var(--transition-base)}.ctrl-input:hover{border-color:var(--gray-400);background-color:var(--gray-50)}.ctrl-input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.ctrl-input::placeholder{color:var(--gray-400)}.vp-row{display:flex;align-items:center;gap:var(--space-sm);margin:var(--space-sm) 0;flex-wrap:nowrap}.vp-input{flex:1 1 auto;min-width:0;padding:9px 12px;border:1px solid var(--gray-300);border-radius:8px;font-size:13px;font-weight:400;color:var(--gray-900);background-color:#fff;text-align:left;box-sizing:border-box;transition:all var(--transition-base)}.vp-input:hover{border-color:var(--gray-400);background-color:var(--gray-50)}.vp-input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px #3b82f61a;background-color:#fff}.vp-input::placeholder{color:var(--gray-400)}.vp-right{display:flex;align-items:center;gap:var(--space-sm);flex:1 1 auto}.vp-size-wrap{display:flex;align-items:center;gap:var(--space-xs);flex:0 0 auto;background-color:var(--gray-50);padding:var(--space-xs) var(--space-sm);border-radius:6px;border:1px solid var(--gray-200)}.vp-size-label{color:var(--gray-600);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.vp-size-unit{color:var(--gray-500);font-size:12px}.vp-size-input{width:56px;padding:5px 8px;border:1px solid var(--gray-300);border-radius:6px;font-size:13px;font-weight:500;color:var(--gray-900);background-color:#fff;transition:all var(--transition-base)}.vp-size-input:hover{border-color:var(--gray-400)}.vp-size-input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f61a}.vp-align-btn{background-color:#fff;color:var(--gray-600);border:1px solid var(--gray-300);width:28px;height:28px;font-size:12px;font-weight:600;border-radius:6px;cursor:pointer;transition:all var(--transition-base);margin-left:8px;flex-shrink:0}.vp-align-btn:hover{border-color:var(--gray-400);background-color:var(--gray-50)}.vp-align-btn[data-align=center]{background-color:var(--blue-50);border-color:var(--blue-300);color:var(--blue-600)}.vp-color-wrap{display:flex;align-items:center;gap:var(--space-xs);margin-left:var(--space-xs)}.vp-color-swatch{width:20px;height:20px;border-radius:4px;border:1px solid var(--gray-300);flex-shrink:0;background-color:#000;box-shadow:inset 0 1px 2px #0000001a}.vp-color-input{width:72px;padding:5px 8px;border:1px solid var(--gray-300);border-radius:6px;font-size:12px;font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:var(--gray-900);background-color:#fff;text-transform:uppercase;transition:all var(--transition-base)}.vp-color-input:hover{border-color:var(--gray-400)}.vp-color-input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f61a}.vp-color-input::placeholder{color:var(--gray-400);text-transform:none}.vp-controls{display:flex;justify-content:flex-end;margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--gray-200)}.vp-reset-btn{background-color:#fff;color:var(--gray-700);border:1px solid var(--gray-300);padding:8px 14px;font-size:12px;font-weight:500;border-radius:8px;cursor:pointer;transition:all var(--transition-base)}.vp-reset-btn:hover{background-color:var(--gray-50);border-color:var(--gray-400)}.overlay-content::-webkit-scrollbar,.debug-surface::-webkit-scrollbar{width:8px;height:8px}.overlay-content::-webkit-scrollbar-track,.debug-surface::-webkit-scrollbar-track{background:transparent}.overlay-content::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:4px;transition:background var(--transition-base)}.overlay-content::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}.debug-surface::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.debug-surface::-webkit-scrollbar-thumb:hover{background:#ffffff4d}#loadingMessage{font-size:14px;font-weight:500;color:var(--gray-600);letter-spacing:.01em}@media(max-width:768px){.overlay-panel{min-width:280px}.vp-row{flex-wrap:wrap}.vp-right{flex-wrap:wrap;width:100%}.vp-input{width:100%}}