:root{--color-primary: #2c5aa0;--color-primary-hover: #234780;--color-primary-light: #e8f0f9;--color-secondary: #5a6c7d;--color-accent: #3d7a9f;--color-success: #2d7a5f;--color-danger: #c4554a;--color-warning: #d97706;--color-bg: #fafbfc;--color-bg-secondary: #f3f5f7;--color-bg-elevated: #ffffff;--color-border: #d4dce5;--color-border-light: #e8ecf0;--color-text: #1a2332;--color-text-muted: #5a6c7d;--color-text-light: #8591a0;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "Monaco", "Menlo", "Consolas", "Courier New", monospace;--border-radius: .375rem;--border-width: 1px;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, .15), 0 4px 8px -2px rgba(0, 0, 0, .08);--shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, .2), 0 8px 16px -4px rgba(0, 0, 0, .1);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease}[data-theme=dark]{--color-primary: #5b9fd8;--color-primary-hover: #7ab3e0;--color-primary-light: #1e3a52;--color-secondary: #8899aa;--color-accent: #6ba3c7;--color-success: #4d9b7c;--color-danger: #d97873;--color-warning: #e69745;--color-bg: #0f1419;--color-bg-secondary: #1a1f26;--color-bg-elevated: #242933;--color-border: #2d3540;--color-border-light: #242933;--color-text: #e6eaf0;--color-text-muted: #8899aa;--color-text-light: #6b7785;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .4);--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .5), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, .6), 0 4px 8px -2px rgba(0, 0, 0, .4);--shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, .7), 0 8px 16px -4px rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);color:var(--color-text);background-color:var(--color-bg);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,var(--color-bg-elevated) 0%,var(--color-primary-light) 60%,var(--color-primary-light) 100%);border-bottom:2px solid var(--color-border);padding:var(--spacing-xl) var(--spacing-lg);text-align:center;position:relative;overflow:hidden}.app-header:before{content:"";position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(44,90,160,.08) 0%,transparent 70%);pointer-events:none;animation:float 20s ease-in-out infinite}@keyframes float{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(-20px,20px) rotate(5deg)}}.header-content{max-width:800px;margin:0 auto;position:relative;z-index:1;animation:fadeInUp .6s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.brand{margin-bottom:var(--spacing-md)}.brand-header{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md)}.brand-logo{height:3.5rem;width:auto;display:block;transition:all var(--transition-base);filter:drop-shadow(0 3px 8px rgba(44,90,160,.3));animation:logoFloat 3s ease-in-out infinite}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.brand-logo:hover{transform:scale(1.1) rotate(5deg);filter:drop-shadow(0 4px 12px rgba(44,90,160,.5));animation-play-state:paused}.brand-name{font-size:2.75rem;font-weight:700;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;letter-spacing:-.03em;line-height:1.1;filter:drop-shadow(0 2px 12px rgba(44,90,160,.25));transition:transform var(--transition-base);cursor:default}.brand-name:hover{transform:scale(1.03);filter:drop-shadow(0 4px 16px rgba(44,90,160,.4))}.brand-tagline{font-size:1.25rem;font-weight:600;background:linear-gradient(90deg,var(--color-secondary) 0%,var(--color-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:var(--spacing-xs) 0 0 0;font-style:italic;letter-spacing:.01em;filter:drop-shadow(0 1px 4px rgba(44,90,160,.15))}.brand-promise{font-size:1rem;line-height:1.6;color:var(--color-text);margin:var(--spacing-lg) 0;padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-bg-elevated);border-radius:var(--border-radius);border-left:4px solid var(--color-primary);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base),transform var(--transition-base)}.brand-promise:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.brand-promise strong{color:var(--color-primary);font-weight:600}.what-is-usebound{margin:var(--spacing-lg) 0;padding:var(--spacing-lg);background-color:var(--color-bg-elevated);border-radius:var(--border-radius);border-left:4px solid var(--color-secondary);box-shadow:var(--shadow-sm)}.what-is-usebound details{cursor:pointer}.what-is-usebound summary{list-style:none;display:flex;align-items:center;gap:var(--spacing-sm)}.what-is-usebound summary::-webkit-details-marker{display:none}.what-is-usebound summary:before{content:"▶";font-size:.875rem;transition:transform .2s;color:var(--color-primary);flex-shrink:0}.what-is-usebound details[open] summary:before{transform:rotate(90deg)}.what-is-usebound summary h2{margin:0}.what-is-usebound h2{font-size:1.5rem;color:var(--color-primary);margin-bottom:0}.what-is-usebound p{font-size:1rem;line-height:1.7;color:var(--color-text);margin:var(--spacing-md) 0 0 0;text-align:left}.what-is-usebound p:last-child{margin-top:var(--spacing-sm)}.what-is-usebound strong{color:var(--color-primary);font-weight:600}.privacy-guarantee{margin-top:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-bg-elevated);border-left:3px solid var(--color-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.privacy-header{display:flex;align-items:center;gap:var(--spacing-sm)}.privacy-badge{font-size:1.25rem;line-height:1}.privacy-statement{flex:1;font-size:.875rem;line-height:1.5;color:var(--color-text);margin:0}.privacy-statement strong{color:var(--color-primary);font-weight:600}.verify-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm);font-family:var(--font-sans);white-space:nowrap;flex-shrink:0}.verify-button:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-1px);background-color:var(--color-primary-light)}.verify-icon{font-size:1rem;display:flex;align-items:center}.verify-text{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left}.verify-text strong{color:var(--color-primary);font-size:.8125rem;font-weight:600;line-height:1.2}.verify-text small{color:var(--color-text-muted);font-size:.6875rem;font-weight:400;line-height:1.2}.learn-more-link{display:inline-block;margin-top:var(--spacing-sm);color:var(--color-primary);text-decoration:none;font-weight:500;font-size:.9375rem;border-bottom:1px dashed var(--color-primary);transition:all var(--transition-fast);position:relative}.learn-more-link:hover{color:var(--color-primary-hover);border-bottom-style:solid;transform:translate(2px)}.app-main{flex:1;padding:var(--spacing-xl);max-width:1400px;margin:0 auto;width:100%}@media (orientation: portrait),(max-aspect-ratio: 4/3){.app-main{display:flex!important;flex-direction:column!important}#file-loader{order:1}#page-navigation{order:2}#watermark-canvas{order:3}#watermark-controls{order:4}#tiled-watermark{order:5}#template-manager{order:6}#export-panel{order:7}}.app-footer{background-color:var(--color-bg-secondary);border-top:2px solid var(--color-border);padding:var(--spacing-lg) var(--spacing-md);padding-bottom:calc(var(--spacing-lg) * 3);text-align:center;font-size:.875rem;color:var(--color-text-muted)}.footer-content{max-width:1200px;margin:0 auto}.footer-nav{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm);flex-wrap:wrap}.footer-nav a{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;transition:color var(--transition-base)}.footer-nav a:hover{color:var(--color-primary);text-decoration:underline}.footer-separator{color:var(--color-text-muted);font-size:.875rem;user-select:none}.footer-secondary{font-size:.8125rem;color:var(--color-text-light);font-style:italic}@media (max-width: 768px){.footer-nav{font-size:.8125rem}}button{font-family:var(--font-sans);font-size:.875rem;font-weight:500;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);border:var(--border-width) solid var(--color-border);background-color:var(--color-bg);color:var(--color-text);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff0d;transform:translate(-50%,-50%);transition:width .4s ease-out,height .4s ease-out,opacity .4s ease-out;opacity:0}button:hover:before{width:120%;height:120%;opacity:1}button:hover{background-color:var(--color-bg-secondary);transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--color-primary)}button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button.primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);color:#fff;border-color:var(--color-primary);box-shadow:0 4px 12px -2px #2c5aa04d}button.primary:hover{background:linear-gradient(135deg,var(--color-primary-hover) 0%,var(--color-primary) 100%);box-shadow:0 6px 20px -4px #2c5aa066;transform:translateY(-2px)}button.primary:active{transform:translateY(0);box-shadow:0 2px 8px -2px #2c5aa04d}button:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:var(--shadow-sm)!important}button:disabled:before{display:none}input[type=text],input[type=number],input[type=color],select,textarea{font-family:var(--font-sans);font-size:.875rem;padding:var(--spacing-sm);border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius);background-color:var(--color-bg);color:var(--color-text);transition:all var(--transition-base);box-shadow:inset 0 1px 2px #0000000a}input[type=text]:focus,input[type=number]:focus,input[type=color]:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2c5aa01a,inset 0 1px 2px #0000000a;transform:translateY(-1px)}textarea{resize:vertical;min-height:80px;line-height:1.5}label{display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-xs)}label.disabled{opacity:.5;cursor:not-allowed}label.disabled select,label.disabled input{cursor:not-allowed}input[type=range]{width:100%}canvas{border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius);box-shadow:var(--shadow-md);cursor:crosshair}.loading{display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.theme-toggle{position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:3rem;height:3rem;border-radius:50%;background-color:var(--color-bg-elevated);border:2px solid var(--color-border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .3s ease;box-shadow:var(--shadow-md);z-index:100}.theme-toggle:hover{background-color:var(--color-primary-light);border-color:var(--color-primary);transform:scale(1.05);box-shadow:var(--shadow-lg)}.theme-icon{user-select:none;pointer-events:none}.how-it-works-content{margin-top:var(--spacing-lg);max-height:2000px;opacity:1;transition:max-height .5s ease,opacity .4s ease,margin-top .4s ease}.how-it-works-content.hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}.steps{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.step{background-color:var(--color-bg);border:2px solid var(--color-border-light);border-radius:var(--border-radius);padding:var(--spacing-lg);transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.step:hover{border-color:var(--color-primary);box-shadow:var(--shadow-lg);transform:translateY(-4px);background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-primary-light) 100%)}.step-icon{font-size:2.5rem;margin-bottom:var(--spacing-md);text-align:center;user-select:none;transition:transform var(--transition-base);display:inline-block}.step:hover .step-icon{transform:scale(1.15) rotate(5deg);filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}.step-content h3{color:var(--color-primary);font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-sm);text-align:center}.step-content p{color:var(--color-text-muted);font-size:.9375rem;line-height:1.6;text-align:center}.how-it-works-note{max-width:800px;margin:0 auto;padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-primary-light);border-left:4px solid var(--color-primary);border-radius:var(--border-radius);color:var(--color-text);font-size:.9375rem;line-height:1.6}.how-it-works-note strong{color:var(--color-primary);font-weight:600}.verification-steps{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}kbd{display:inline-block;padding:2px 6px;font-family:var(--font-mono);font-size:.85em;color:var(--color-text);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:3px;box-shadow:inset 0 -1px 0 var(--color-border);font-weight:600}@media (max-width: 900px){.steps,.verification-steps{grid-template-columns:1fr}}@media (max-width: 640px){.privacy-guarantee{flex-direction:column;text-align:center}.privacy-header{flex-direction:column}.verify-button{width:100%;justify-content:center}}