*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:#0f0e17;color:#e8e8f0;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#1a1a2e}::-webkit-scrollbar-thumb{background:#444;border-radius:4px}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(135deg,#1a1a2e,#2c33a4);padding:1.5rem;font-family:Inter,system-ui,-apple-system,sans-serif}.auth-card{width:100%;max-width:420px;background-color:#ffffff0d;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.1);border-radius:1.5rem;padding:2.5rem;box-shadow:0 25px 50px -12px #00000080;text-align:center;box-sizing:border-box}.auth-logo{margin:0 auto 1.5rem;max-height:70px;object-fit:contain;display:flex;justify-content:center;color:#fff}.auth-heading{margin-bottom:2rem;color:#fff;font-size:1.875rem;font-weight:800;letter-spacing:-.02em;margin-top:0}.auth-form{display:flex;flex-direction:column;gap:1.25rem}.auth-input-group{position:relative;display:flex;align-items:center;width:100%}.auth-input{width:100%;border-radius:9999px;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.15);color:#fff;padding:1.125rem 3rem 1.125rem 1.5rem;font-weight:500;outline:none;transition:all .2s ease;box-sizing:border-box;font-size:1rem}.auth-input::placeholder{color:#ffffff80}.auth-input:hover{border-color:#ffffff4d;background-color:#ffffff26}.auth-input:focus{border-color:#60a5fa;background-color:#fff3;box-shadow:0 0 0 4px #60a5fa26}.auth-input-icon{position:absolute;right:1.25rem;color:#fff9;display:flex;align-items:center;justify-content:center;height:100%;pointer-events:none;transition:color .2s ease}.auth-input:focus~.auth-input-icon{color:#60a5fa}.auth-options{display:flex;width:100%;justify-content:space-between;align-items:center;font-size:.875rem;color:#fffc;margin-top:.25rem}.auth-checkbox-label{display:flex;align-items:center;gap:.5rem;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.auth-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#ffffff1a;margin:0;font:inherit;color:currentColor;width:1.25em;height:1.25em;border:1px solid rgba(255,255,255,.3);border-radius:.25rem;display:grid;place-content:center;cursor:pointer;transition:all .2s}.auth-checkbox:hover{border-color:#60a5fa;background-color:#ffffff26}.auth-checkbox:before{content:"";width:.65em;height:.65em;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #1a1a2e;background-color:#1a1a2e;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.auth-checkbox:checked{background-color:#60a5fa;border-color:#60a5fa}.auth-checkbox:checked:before{transform:scale(1)}.auth-link{font-weight:600;color:#60a5fa;text-decoration:none;transition:color .2s}.auth-link:hover{text-decoration:underline;color:#93c5fd}.auth-message{font-size:.875rem;font-weight:600;margin:0;padding:.75rem;border-radius:.5rem}.auth-message.success{background-color:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.3)}.auth-message.error{background-color:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3)}.auth-button{width:100%;background-image:linear-gradient(135deg,#60a5fa,#3b82f6);color:#fff;border-radius:9999px;padding:1.125rem;margin-top:1rem;font-size:1.125rem;font-weight:700;border:none;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #3b82f64d}.auth-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #3b82f680;background-image:linear-gradient(135deg,#93c5fd,#60a5fa)}.auth-button:active{transform:translateY(0)}.auth-footer{margin-top:2.5rem;font-size:.9rem;color:#ffffffb3;font-weight:500}.app-layout{display:flex;flex-direction:column;height:100vh;background:#0f0e17}.app-body{display:flex;flex:1;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;background:#16162a;border-bottom:1px solid #2a2a4a;flex-shrink:0;z-index:10}.header-actions{display:flex;align-items:center;gap:8px}.btn-logout{padding:6px 12px;background:transparent;border:1px solid #3a3a6a;color:#c8c8ff;border-radius:8px;cursor:pointer;font-weight:600}.btn-logout:hover{background:#4f52d035}.header-brand{display:flex;align-items:center;gap:10px}.header-icon{font-size:22px}.app-header h1{font-size:18px;font-weight:700;color:#c8c8ff;letter-spacing:-.3px}.header-sub{font-size:12px;color:#66a;font-weight:400}.sidebar{width:300px;flex-shrink:0;overflow-y:auto;background:#13132a;border-right:1px solid #2a2a4a;padding:12px;display:flex;flex-direction:column;gap:12px}.panel{background:#1c1c38;border:1px solid #2e2e52;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px}.panel-title{font-size:13px;font-weight:600;color:#a0a0d0;text-transform:uppercase;letter-spacing:.6px;padding-bottom:6px;border-bottom:1px solid #2e2e52}.dropzone{border:2px dashed #3a3a6a;border-radius:8px;padding:18px 12px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:#12122a}.dropzone:hover,.dropzone.dragging{border-color:#6366f1;background:#1a1a40}.dropzone-icon{font-size:24px;display:block;margin-bottom:6px}.dropzone p{font-size:13px;color:#9090c0;line-height:1.6}.dropzone-hint{font-size:11px;color:#55a;margin-top:2px}.progress-wrap{display:flex;align-items:center;gap:8px;font-size:12px;color:#9090c0}.progress-bar{height:4px;background:#6366f1;border-radius:4px;flex:1;transition:width .2s}.msg{font-size:12px;padding:7px 10px;border-radius:6px;line-height:1.4}.msg.success{background:#162a1a;color:#6ddc7e;border:1px solid #2a5230}.msg.error{background:#2a1616;color:#f08080;border:1px solid #5a2222}.control-row{display:flex;flex-direction:column;gap:6px}.control-label{font-size:12px;color:#8080b8;font-weight:500;display:flex;align-items:center;gap:6px}.val-badge{background:#2a2a50;color:#aae;font-size:11px;padding:1px 6px;border-radius:4px;font-weight:600;font-variant-numeric:tabular-nums}.color-row{display:flex;align-items:center;gap:10px}.color-input{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;background:transparent;padding:0}.color-value{font-size:12px;color:#7070aa;font-family:monospace;letter-spacing:.5px}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:#2e2e58;border-radius:4px;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#6366f1;cursor:pointer;border:2px solid #9090ff}.toggle-btn{padding:6px 16px;border-radius:6px;border:1px solid #3a3a6a;background:#1c1c38;color:#8080c0;font-size:12px;font-weight:600;cursor:pointer;width:60px;transition:all .2s}.toggle-btn.active{background:#6366f1;border-color:#6366f1;color:#fff;box-shadow:0 0 10px #6366f160}.hint-box{background:#12122a;border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:3px}.hint-box p{font-size:11px;color:#5a5a8a}.btn-primary{padding:9px 14px;background:#6366f1;color:#fff;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,opacity .2s}.btn-primary:hover{background:#4f52d0}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-apply{padding:4px 10px;background:#25254a;color:#aae;border:1px solid #3a3a6a;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;transition:background .2s;white-space:nowrap}.btn-apply:hover{background:#6366f1;color:#fff;border-color:#6366f1}.history-title{font-size:12px;color:#7070a8;font-weight:600;display:flex;align-items:center;justify-content:space-between}.refresh-btn{background:none;border:none;color:#6060a0;cursor:pointer;font-size:14px;padding:0 4px;transition:color .2s}.refresh-btn:hover{color:#aae}.history-list{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto}.history-item{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#12122a;border:1px solid #2a2a4a;border-radius:6px;padding:6px 8px}.history-info{display:flex;align-items:center;gap:7px;min-width:0}.color-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:1px solid #3a3a6a}.history-meta{font-size:10px;color:#6060a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.settings-history{display:flex;flex-direction:column;gap:8px}.loading-text,.empty-text{font-size:12px;color:#55a;text-align:center;padding:8px 0}.canvas-area{flex:1;position:relative;overflow:hidden}.viewer-canvas{width:100%;height:100%;position:relative}.viewer-canvas canvas{display:block;width:100%!important;height:100%!important}.viewer-hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#16162acc;border:1px solid #2e2e52;color:#7070aa;font-size:12px;padding:8px 16px;border-radius:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;white-space:nowrap}