.watermark-page{max-width:1400px;margin:3rem auto;padding:0 2rem}.watermark-header{text-align:center;margin-bottom:3rem}.watermark-header h2{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}.watermark-header p{font-size:1.125rem;color:var(--text-secondary)}.watermark-content{display:grid;grid-template-columns:400px 1fr;gap:2rem}.watermark-controls{background:var(--bg-secondary);border-radius:1rem;padding:2rem;box-shadow:var(--shadow-lg);border:1px solid var(--border-color);display:flex;flex-direction:column;gap:1.5rem;max-height:calc(100vh - 250px);overflow-y:auto}.upload-section{display:flex;flex-direction:column;gap:1rem}.btn-upload{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#fff;padding:1rem 2rem;border-radius:.5rem;border:none;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .3s ease,box-shadow .3s ease;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform,box-shadow}.btn-upload:hover{box-shadow:0 6px 20px #43e97b66;transform:translate3d(0,-2px,0)}.btn-upload:active{transform:translateZ(0)}.file-name{font-size:.875rem;color:var(--text-secondary);text-align:center;margin:0;word-break:break-all}.error-message{padding:.75rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:.5rem;color:#ef4444;font-size:.875rem}.form-group{display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:visible}.form-group label{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--text-primary);font-size:.95rem}.form-group textarea,.form-group input[type=text],.form-group select{width:100%;padding:.875rem 1rem;border:2px solid var(--border-color);border-radius:.5rem;background:var(--bg-primary);color:var(--text-primary);font-size:1rem;transition:var(--transition);font-family:inherit}.form-group textarea{resize:vertical;min-height:80px}.form-group textarea:focus,.form-group input[type=text]:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}.form-group input[type=range]{width:100%;height:6px;background:var(--bg-tertiary);border-radius:3px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--primary);border-radius:50%;cursor:pointer}.form-group input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--primary);border-radius:50%;cursor:pointer;border:none}.checkbox-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.checkbox-group input[type=checkbox]{width:1.25rem;height:1.25rem;cursor:pointer}.color-picker{display:flex;align-items:center;gap:1rem}.color-input-wrapper{position:relative;display:inline-block}.color-picker input[type=color]{width:60px;height:40px;border:2px solid var(--border-color);border-radius:.5rem;cursor:pointer;opacity:0;position:absolute;top:0;left:0}.color-preview{width:60px;height:40px;border:2px solid var(--border-color);border-radius:.5rem;cursor:pointer;transition:var(--transition);box-shadow:inset 0 0 0 2px #ffffff80}.color-preview:hover{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.color-value{font-family:Courier New,monospace;font-size:.875rem;color:var(--text-secondary);min-width:80px;-webkit-user-select:all;user-select:all;display:inline-block;line-height:1.25rem;vertical-align:middle}.color-value.clickable{cursor:pointer;padding:2px 6px;background:#9333ea0d;border:2px solid transparent;border-radius:.25rem;transition:var(--transition);box-sizing:border-box;text-align:center;width:80px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:.875rem;line-height:1.25rem}.color-value.clickable:hover{background:#9333ea26;color:var(--primary)}.color-input-text{font-family:Courier New,monospace;font-size:.875rem;color:var(--text-secondary);width:80px;height:24px;padding:2px 6px;background:#9333ea1a;border:2px solid var(--primary);border-radius:.25rem;text-align:center;line-height:1.25rem;display:inline-block;vertical-align:middle;box-sizing:border-box}.color-input-text:focus{outline:none;box-shadow:0 0 0 2px #9333ea33;color:var(--primary)}.positions-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:.5rem}.position-checkbox{display:flex;align-items:center;gap:.5rem;padding:.5rem;border:1px solid var(--border-color);border-radius:.5rem;cursor:pointer;transition:var(--transition)}.position-checkbox:hover{background:var(--bg-secondary);border-color:var(--primary)}.position-checkbox input[type=checkbox]{width:1rem;height:1rem;cursor:pointer}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.action-buttons{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.preview-section{background:var(--bg-secondary);border-radius:1rem;padding:2rem;box-shadow:var(--shadow-lg);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;min-height:400px}.original-image{max-width:100%;max-height:70vh;border-radius:.5rem;box-shadow:0 4px 12px #0000001a}.watermark-canvas{max-width:100%;max-height:70vh;border-radius:.5rem;box-shadow:0 4px 12px #0000001a;background:#fff}.btn{padding:1rem 2rem;border-radius:.5rem;font-weight:600;font-size:1rem;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:.5rem;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform,box-shadow;-webkit-tap-highlight-color:transparent}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);color:#fff;box-shadow:0 4px 12px #2563eb4d}.btn-primary:hover:not(:disabled){box-shadow:0 6px 20px #2563eb66;transform:translate3d(0,-2px,0)}.btn-primary:active:not(:disabled){transform:translateZ(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:2px solid var(--border-color)}.btn-secondary:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}@media(max-width:1200px){.watermark-content{grid-template-columns:1fr}.watermark-controls{order:2}.preview-section{order:1}}@media(max-width:768px){.watermark-page{padding:0 1rem;margin:2rem auto}.watermark-header{margin-bottom:2rem}.watermark-header h2{font-size:1.875rem}.watermark-header p{font-size:1rem}.watermark-controls{padding:1.5rem}.action-buttons{flex-direction:column}.positions-selector{grid-template-columns:1fr}.btn{padding:.875rem 1.5rem;font-size:.938rem}}@media(max-width:480px){.watermark-page{padding:0 .75rem;margin:1.5rem auto}.watermark-header{margin-bottom:1.5rem}.watermark-header h2{font-size:1.5rem}.watermark-header p{font-size:.938rem}.watermark-controls{padding:1.25rem;gap:1.25rem}.form-group label{font-size:.875rem}.form-group textarea,.form-group input[type=text],.form-group select{padding:.75rem .875rem;font-size:.938rem}.color-picker{flex-direction:column;align-items:flex-start;gap:.75rem}.preview-section{padding:1.25rem;min-height:300px}.btn{padding:.75rem 1.25rem;font-size:.875rem}.btn-upload{padding:.875rem 1.5rem}}@media(max-width:360px){.watermark-page{padding:0 .5rem;margin:1rem auto}.watermark-header h2{font-size:1.375rem}.watermark-header p{font-size:.875rem}.watermark-controls{padding:1rem}.form-group label{font-size:.813rem}.form-group textarea,.form-group input[type=text],.form-group select{padding:.625rem .75rem;font-size:.875rem}.btn{padding:.625rem 1rem;font-size:.813rem}}.mode-selector{display:flex;gap:.75rem;flex-wrap:wrap}.mode-option{flex:1;min-width:120px;display:flex;align-items:center;gap:.5rem;padding:.875rem 1rem;background:var(--bg-primary);border:2px solid var(--border-color);border-radius:.5rem;cursor:pointer;transition:var(--transition)}.mode-option:hover{border-color:var(--primary);background:#2563eb0d}.mode-option input[type=radio]{accent-color:var(--primary);width:18px;height:18px;cursor:pointer}.mode-option span{font-weight:500;color:var(--text-primary)}.mode-option input[type=radio]:checked+span{color:var(--primary)}.watermark-list{display:flex;flex-direction:column;gap:.75rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:.5rem;padding:1rem;max-height:none}.empty-watermark-hint{text-align:center;padding:2rem 1rem;color:var(--text-secondary);font-size:.875rem}.watermark-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.75rem;padding:.75rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:.375rem;transition:var(--transition);position:relative;overflow:visible}.watermark-item:hover{border-color:var(--primary);box-shadow:0 2px 8px #2563eb1a}.watermark-text{font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.watermark-select{min-width:100px;position:relative}.custom-select-small{padding:.5rem .75rem;font-size:.875rem}.custom-select-small .custom-select-value{font-size:.875rem}.remove-btn{padding:.5rem;background:#ef4444;color:#fff;border:none;border-radius:.375rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;flex-shrink:0}.remove-btn:hover{background:#dc2626;transform:scale(1.05)}.watermark-new-section{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem;padding:1rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:.5rem}.watermark-new-position{display:flex;flex-direction:column;gap:.5rem}.control-label{font-size:.875rem;font-weight:500;color:var(--text-primary)}.watermark-item-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:.5rem;padding:1rem;transition:var(--transition);position:relative;overflow:visible}.watermark-item-card:hover{border-color:var(--primary);box-shadow:0 2px 8px #2563eb1a}.watermark-item-header{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1rem}.watermark-textarea{flex:1;padding:.75rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:.375rem;color:var(--text-primary);font-size:.938rem;font-family:inherit;resize:vertical;min-height:60px;transition:var(--transition)}.watermark-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.watermark-item-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.watermark-control{display:flex;flex-direction:column;gap:.5rem}.control-input{display:flex;align-items:center;gap:.5rem}.watermark-number-input{flex:1;padding:.5rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:.375rem;color:var(--text-primary);font-size:.875rem;transition:var(--transition);max-width:80px}.watermark-number-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light)}.control-suffix{font-size:.875rem;color:var(--text-secondary)}.range-input{position:relative}.range-input input[type=range]{flex:1;height:6px;background:var(--bg-tertiary);border-radius:3px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.range-input input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--primary);border-radius:50%;cursor:pointer}.range-input input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--primary);border-radius:50%;cursor:pointer;border:none}.range-value{font-size:.875rem;font-weight:500;color:var(--text-primary);min-width:45px;text-align:right}.color-input{display:flex;align-items:center;gap:.5rem}.color-input input[type=color]{width:40px;height:36px;border:1px solid var(--border-color);border-radius:.375rem;cursor:pointer}.color-hex{font-family:Courier New,monospace;font-size:.875rem;color:var(--text-secondary)}.add-watermark-btn{width:100%;padding:.875rem;background:var(--primary);color:#fff;border:none;border-radius:.5rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.5rem}.add-watermark-btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px #2563eb4d}.add-watermark-btn:active{transform:translateY(0)}.custom-select-wrapper{position:relative;width:100%}.custom-select{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:.5rem;cursor:pointer;transition:var(--transition);-webkit-user-select:none;user-select:none}.custom-select:hover{border-color:var(--primary);box-shadow:0 2px 8px #2563eb1a}.custom-select-value{color:var(--text-primary);font-weight:500}.custom-select-arrow{transition:transform .2s ease;color:var(--text-secondary)}.custom-select-arrow.open{transform:rotate(180deg)}.custom-select-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:.5rem;box-shadow:0 10px 40px #0003;z-index:9999;max-height:none;overflow-y:auto;overflow-x:hidden;animation:slideDown .2s ease;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.custom-select-option{padding:.875rem 1rem;cursor:pointer;transition:var(--transition);color:var(--text-primary)}.custom-select-option:hover{background:#2563eb1a}.custom-select-option.active{background:var(--primary);color:#fff;font-weight:600}.custom-select-option.disabled{color:var(--text-secondary);cursor:not-allowed;opacity:.6}.custom-select-option.disabled:hover{background:transparent}@media(max-width:768px){.mode-selector{flex-direction:column;gap:.5rem}.mode-option{min-width:auto}.watermark-item{grid-template-columns:1fr;gap:.5rem}.watermark-text{grid-column:1 / -1}.watermark-select{min-width:auto}.remove-btn{justify-self:end}.watermark-item-controls{grid-template-columns:1fr;gap:.625rem}.watermark-new-section{padding:.875rem}}@media(max-width:480px){.watermark-list{padding:.75rem}.watermark-item{padding:.625rem;gap:.5rem}.watermark-text{font-size:.875rem}.custom-select-small{padding:.375rem .5rem;font-size:.813rem}.add-watermark-btn{padding:.75rem;font-size:.875rem}.watermark-item-card{padding:.75rem}.watermark-textarea{font-size:.875rem;min-height:50px}.watermark-number-input{max-width:70px;font-size:.813rem}.control-label{font-size:.813rem}.watermark-new-section{padding:.75rem}}.watermark-item-simple{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:.5rem;padding:.875rem 1rem;transition:var(--transition)}.watermark-item-simple:hover{border-color:var(--primary);box-shadow:0 2px 8px #2563eb1a}.watermark-item-content{display:flex;align-items:center;justify-content:space-between;gap:1rem}.watermark-item-info{flex:1;display:flex;flex-direction:column;gap:.375rem;min-width:0}.watermark-item-text{font-weight:500;color:var(--text-primary);font-size:.938rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.watermark-item-meta{font-size:.813rem;color:var(--text-secondary)}.watermark-item-actions{display:flex;gap:.5rem;flex-shrink:0}.edit-btn{padding:.5rem;background:var(--primary);color:#fff;border:none;border-radius:.375rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center}.edit-btn:hover{background:var(--primary-hover);transform:scale(1.05)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:var(--bg-primary);border-radius:1rem;box-shadow:0 20px 60px #0000004d;max-width:500px;width:100%;max-height:calc(100vh - 2rem);display:flex;flex-direction:column;overflow:hidden;position:relative}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--border-color)}.modal-header h3{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin:0}.modal-close-btn{padding:.5rem;background:transparent;border:none;border-radius:.375rem;cursor:pointer;color:var(--text-secondary);transition:var(--transition);display:flex;align-items:center;justify-content:center}.modal-close-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-body .form-group{margin-bottom:1.25rem}.modal-body .form-group:last-child{margin-bottom:0}.modal-footer{display:flex;gap:.75rem;padding:1.5rem;border-top:1px solid var(--border-color);justify-content:flex-end}.modal-footer .btn{min-width:100px}@media(max-width:768px){.watermark-item-content{flex-direction:column;align-items:flex-start;gap:.75rem}.watermark-item-actions{align-self:flex-end}.modal-content{max-height:95vh}.modal-header,.modal-body,.modal-footer{padding:1.25rem}}@media(max-width:480px){.watermark-item-text{font-size:.875rem}.watermark-item-meta{font-size:.75rem}.modal-overlay{padding:.5rem}.modal-header,.modal-body,.modal-footer{padding:1rem}.modal-header h3{font-size:1.125rem}}