@font-face{font-family:Be Vietnam Pro;src:url(/assets/BeVietnamPro-Regular-D77_wdhb.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Hmt Regular;src:url(/assets/HmtRegular-WRrv-CEmi229A.ttf) format("truetype");font-weight:400;font-style:normal}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:#f5f5f0;background-image:url('data:image/svg+xml;utf8,<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="1" fill="%23e0dfda"/></svg>');background-size:28px 28px;min-height:100vh;overflow-x:hidden}.container{display:flex;height:100vh;padding:12px;gap:12px}.header{display:none}.logo-link{display:flex;flex-direction:column;align-items:flex-start;gap:0;text-decoration:none;padding:20px 20px 16px}.header-logo{width:36px;height:36px;border-radius:50%;object-fit:cover;margin-bottom:20px}.logo-title{font-family:Inter,sans-serif;font-size:1.3rem;color:#2d3436;font-weight:700}.main-layout{display:contents}.sidebar{width:33.333%;min-width:300px;max-width:420px;background:#fff;border-radius:16px;box-shadow:0 1px 3px #0000000f,0 0 0 1px #0000000a;display:flex;flex-direction:column;height:calc(100vh - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch;flex-shrink:0;padding:0}.preview-section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;padding:40px;min-width:0}.sidebar-section{padding:0 20px;margin-bottom:4px}.sidebar-section-label{font-size:13px;font-weight:600;color:#444;text-transform:uppercase;letter-spacing:.5px;margin-bottom:20px;padding-top:14px;border-top:1px solid #f0f0ec;display:flex;align-items:center;gap:8px}.sidebar-section-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#f5f5f0;border-radius:7px;flex-shrink:0}.sidebar-section-icon svg{width:15px;height:15px;color:#6c6c6c}.sidebar-control{margin-bottom:10px}.sidebar-control-row{display:flex;align-items:center;gap:10px}.upload-section{border:1.5px dashed #d1d5db;border-radius:10px;padding:16px 12px;text-align:center;background:#fafaf8;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:80px;margin:5px 20px 8px}.upload-section:hover{border-color:#6adadf;background:#fffbeb}.upload-section.has-file{border-style:solid;border-color:#e5e7eb;padding:10px;cursor:default;min-height:auto}.upload-section.has-file:hover{border-color:#e5e7eb;background:#fafaf8}input[type=file]{display:none}.upload-label{font-size:13px;color:#4ea552;font-weight:600;display:block;margin-bottom:4px}.helper-text{font-size:12px;color:#6b7280;margin-top:4px;line-height:1.4}.image-preview-container{position:relative;width:100%;max-height:120px;overflow:hidden;background:#f9fafb;border-radius:8px;padding:6px;display:flex;justify-content:center;align-items:center}.image-preview{max-width:100%;max-height:100px;border-radius:6px;object-fit:contain}.upload-actions{display:flex;gap:12px;align-items:center;margin-top:10px}.setting-group{margin-bottom:18px}.setting-group label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:8px}.btn-primary{background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-weight:600;font-size:12px;cursor:pointer;transition:all .2s ease;width:100%}.btn-primary:hover{opacity:.9}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.preview-content-wrapper{display:flex;justify-content:center;align-items:center;width:100%}.preview-content{position:relative;border-radius:12px;width:100%;max-width:860px;aspect-ratio:16 / 9;display:flex;overflow:hidden;background:repeating-conic-gradient(#e5e7eb 0% 25%,#f3f3ef 0% 50%) 50% / 20px 20px;box-shadow:0 1px 3px #00000014,0 0 0 1px #0000000a}.preview-content.ratio-16-9{aspect-ratio:16 / 9;max-width:860px}.preview-content.ratio-9-16{aspect-ratio:9 / 16;max-width:380px}.preview-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.placeholder{text-align:center;color:#9ca3af;margin:auto}.placeholder svg{width:100px;height:100px;margin:0 auto 16px;opacity:.3}.control-group{display:flex;align-items:center;gap:8px}.label-text{font-size:13px;font-weight:400;color:#374151;white-space:nowrap;flex-shrink:0}.slider-compact{flex:1;height:4px;border-radius:2px;background:#e5e7eb;outline:none;-webkit-appearance:none;cursor:pointer}.slider-compact::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#5cb860,#4ea552);cursor:pointer}.color-preview-box{width:24px;height:24px;border-radius:4px;border:2px solid #e5e7eb;cursor:pointer}.popup-menu{display:none;position:absolute;top:100%;left:0;margin-top:8px;background:#fff;border-radius:12px;padding:14px;box-shadow:0 8px 24px #0000001f;width:260px;z-index:1000}.popup-menu.visible{display:block}.color-square{position:relative;width:100%;height:150px;background:linear-gradient(to right,#fff,red);border-radius:8px;margin-bottom:12px;cursor:crosshair;border:2px solid #e5e7eb}.color-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,black);border-radius:6px}.color-cursor{position:absolute;width:12px;height:12px;border:2px solid white;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 3px #00000080}.hue-slider{height:20px;border-radius:6px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);position:relative;cursor:pointer;border:2px solid #e5e7eb;margin-bottom:12px}.hue-cursor{position:absolute;width:4px;height:24px;background:#fff;border:2px solid #666;border-radius:2px;top:-2px;transform:translate(-50%);pointer-events:none}.hex-input{flex:1;padding:6px 10px;border:2px solid #e5e7eb;border-radius:6px;font-family:monospace;font-size:13px}.color-input{position:absolute;width:0;height:0;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);pointer-events:none}.mb-12{margin-bottom:12px}.flex-center-gap-8{display:flex;align-items:center;gap:8px}.pos-relative{position:relative}.hidden{display:none!important}.export-buttons{display:flex;gap:8px;padding:16px 20px;margin-top:auto;border-top:1px solid #f0f0ec}.export-buttons .btn-primary{flex:1}.aspect-ratio-group{display:flex;gap:8px;align-items:center}.aspect-ratio-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 6px;background:none;border:none;cursor:pointer;opacity:.4;transition:opacity .2s}.aspect-ratio-btn:hover{opacity:.7}.aspect-ratio-btn.selected{opacity:1}.aspect-ratio-btn span{font-size:9px;font-weight:500}.aspect-ratio-btn.crop-btn{flex-direction:row;gap:4px;padding:4px 10px;border-radius:6px;background:#374151;color:#fff;opacity:.55}.aspect-ratio-btn.crop-btn:hover{opacity:.8}.aspect-ratio-btn.crop-btn.selected{opacity:1;background:#f59e0b}.aspect-ratio-btn.crop-btn span{font-size:11px}.value-display{display:inline-block;background:#f3f4f6;color:#6b7280;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:400;min-width:34px;text-align:center}.loading-overlay{position:absolute;inset:0;background:#ffffffe6;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;border-radius:12px}.loading-spinner{width:40px;height:40px;border:4px solid #e8f5e9;border-top-color:#4ea552;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:12px;font-size:14px;color:#6b7280}.speed-group{display:flex;gap:3px;flex-wrap:wrap}.speed-btn{padding:4px 8px;border:1.5px solid #e5e7eb;border-radius:6px;background:#fff;font-size:12px;font-weight:500;color:#9ca3af;cursor:pointer;transition:all .15s}.speed-btn:hover{border-color:#6adadf;color:#4ea552}.speed-btn.selected{background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;border-color:#4ea552}.toggle-group{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#f9fafb;border-radius:8px;height:36px}.toggle-switch{position:relative;width:32px;height:18px;background:#d1d5db;border-radius:9px;cursor:pointer;transition:background .2s;flex-shrink:0}.toggle-switch.active{background:linear-gradient(135deg,#5cb860,#4ea552)}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s}.toggle-switch.active:after{transform:translate(14px)}.bg-upload-area{border:1.5px dashed #d1d5db;border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;min-height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center}.bg-upload-area:hover{border-color:#6adadf;background:#fffbeb}.bg-upload-area .bg-thumb{max-width:100%;max-height:60px;border-radius:4px;object-fit:contain;margin-bottom:4px}.bg-upload-actions{display:flex;gap:8px;align-items:center;margin-top:4px}.bg-upload-actions span{font-size:11px;cursor:pointer;font-weight:500}.checkbox-input{width:16px;height:16px;cursor:pointer;accent-color:#4ea552}.style-toggle{display:flex;gap:3px}.style-btn{padding:4px 8px;border:1.5px solid #e5e7eb;background:#fff;border-radius:6px;font-size:11px;font-weight:600;color:#9ca3af;cursor:pointer;transition:all .15s}.style-btn:hover{border-color:#6adadf;color:#4ea552}.style-btn.active{background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;border-color:#4ea552}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent;margin:8px 0}.sidebar::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}.chart-area{width:100%}.chart-container-wrapper{display:flex;justify-content:center;align-items:center;min-height:0}.chart-container{position:relative;width:100%;height:auto;max-width:900px;aspect-ratio:16 / 9;background:#fff;box-shadow:0 4px 20px #00000026;border-radius:20px;overflow:hidden}#chartSvg{width:100%;height:100%;display:block;margin:0 auto}.empty-state{text-align:center;color:#999;padding:50px;font-size:18px}.empty-icon{font-size:20px;margin-bottom:10px}.mode-btn{flex:1;padding:12px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;color:#9ca3af;font-weight:600;cursor:pointer;transition:all .15s;font-size:13px}.mode-btn:hover{border-color:#6adadf;color:#4ea552}.mode-btn.active,.mode-btn.selected{background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;border-color:#4ea552}.chart-type-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.compact-mode-btn{padding:8px;font-size:13px}.input-row{display:grid;grid-template-columns:1fr minmax(70px,90px) minmax(50px,60px) minmax(50px,60px);gap:8px;align-items:center;margin-bottom:12px;min-width:0;position:relative;z-index:1}.input-row input[type=text],.input-row input[type=number]{padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;transition:all .2s;min-width:0}.input-row input:focus{outline:none;border-color:#6adadf;box-shadow:0 0 0 2px #6adadf40}.color-pattern-preview{width:100%;max-width:60px;min-width:50px;height:36px;border:1.5px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .15s;flex-shrink:0;position:relative;overflow:hidden}.color-pattern-preview:hover{border-color:#6adadf}.color-pattern-preview svg{pointer-events:none}.settings-column{position:relative;z-index:auto;isolation:isolate}.plus-icon{width:24px;height:24px;cursor:pointer;opacity:.6;transition:opacity .2s}.plus-icon:hover{opacity:1}.data-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px;position:relative;z-index:1}.data-table thead{background:#f3f4f6}.data-table th{padding:8px 6px;text-align:left;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb}.data-table td{padding:6px;border-bottom:1px solid #e5e7eb}.data-table input[type=text],.data-table input[type=number]{width:100%;padding:6px 8px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;transition:all .2s}.data-table input:focus{outline:none;border-color:#6adadf;box-shadow:0 0 0 2px #6adadf40}.data-table svg{cursor:pointer}.trash-icon{width:24px;height:24px;cursor:pointer;opacity:.6;transition:opacity .2s}.trash-icon:hover{opacity:1}.move-icon{width:20px;height:20px;cursor:grab;opacity:.6;transition:opacity .2s}.move-icon:hover{opacity:1}.move-icon:active{cursor:grabbing}.custom-palette-dropdown{position:relative;z-index:100}.palette-dropdown-selected{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;font-size:13px;font-weight:500;color:#374151;transition:all .15s}.palette-dropdown-selected:hover{border-color:#6adadf}.palette-dropdown-options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#fff;border:1.5px solid #6adadf;border-radius:8px;box-shadow:0 8px 24px #0000001f;max-height:300px;overflow-y:auto;z-index:1000}.palette-option{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;font-size:13px;color:#374151;transition:background .2s}.palette-option:hover{background:#f3f4f6}.palette-strip{width:70px;height:20px;border-radius:4px}.label-input-group{margin-bottom:12px}.label-input-group label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:6px}.label-input-group input{width:100%;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;transition:all .2s}.label-input-group input:focus{outline:none;border-color:#6adadf;box-shadow:0 0 0 2px #6adadf40}.slider-group{margin-bottom:14px}.slider-group label{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:#374151;margin-bottom:6px}.slider-value{color:#4ea552;font-weight:700}.slider-group input[type=range]{width:100%;height:4px;border-radius:2px;background:#e5e7eb;outline:none;-webkit-appearance:none}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#5cb860,#4ea552);cursor:pointer}.slider-group input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#5cb860,#4ea552);cursor:pointer;border:none}.animate-btn{padding:10px 16px;border:none;border-radius:8px;background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;font-weight:600;font-size:12px;cursor:pointer;transition:all .2s;display:inline-block}.animate-btn:hover:not(:disabled){opacity:.9}.animate-btn:disabled{opacity:.4;cursor:not-allowed}.animate-btn-container{text-align:center;margin-top:16px}.edit-popup{display:none;position:fixed;background:#fff;border:1.5px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 8px 24px #0000001f;z-index:10000;min-width:280px;max-width:400px;pointer-events:none}.edit-popup.active{display:block;pointer-events:auto}.color-picker-container{display:flex;gap:10px;margin-bottom:12px}.color-canvas{width:180px;height:180px;border:2px solid #e5e7eb;border-radius:8px;cursor:crosshair}.color-hue-slider{width:20px;height:180px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;background:linear-gradient(to bottom,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.color-hex-input{display:flex;align-items:center;gap:8px;margin-bottom:12px}.color-hex-input label{font-size:12px;font-weight:700;color:#374151}.color-hex-input input{flex:1;padding:6px 10px;border:2px solid #e5e7eb;border-radius:6px;font-size:13px;font-family:monospace;text-transform:uppercase}.color-display-small{width:40px;height:28px;border:2px solid #e5e7eb;border-radius:6px}.edit-popup-patterns{display:flex;gap:6px;flex-wrap:wrap}.edit-popup-pattern{width:50px;height:50px;cursor:pointer;position:relative}.edit-popup-pattern svg{width:50px;height:50px;display:block;transition:all .2s}.edit-popup-pattern:hover svg{transform:scale(1.08)}.edit-popup-pattern.selected:after{content:"";position:absolute;inset:-3px;border:2px solid #4ea552;border-radius:6px;pointer-events:none}.bg-type-toggle{display:flex;gap:16px;margin-bottom:12px}.bg-type-toggle label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:#374151}.bg-color-display{width:60px;height:36px;border:1.5px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .15s}.bg-color-display:hover{border-color:#6adadf}.bg-image-input{width:100%;padding:8px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px}.grid-2col-gap12{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid-2col-100-gap8{display:grid;grid-template-columns:1fr 1fr 100px;gap:8px;align-items:end}.grid-4col-gap8{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.flex-gap12{display:flex;gap:12px}.flex-gap8-center{display:flex;gap:8px;align-items:center}.flex-gap16-center{display:flex;gap:16px;align-items:center}.flex-col-center-gap3{display:flex;flex-direction:column;align-items:center;gap:3px}.flex-center{display:flex;justify-content:center}.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mt-16{margin-top:16px}.section-label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:8px}.label-fontsize-10{font-size:10px;color:currentColor;font-weight:600}.popup-heading{margin:0 0 12px;font-size:14px;font-weight:700;color:#374151}.full-width-input{width:100%;padding:8px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px}.full-width-select{width:100%;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;background:#fff;cursor:pointer}.full-width-select-sm{width:100%;padding:8px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;background:#fff;cursor:pointer}.full-width-slider{width:100%}.aspect-btn-base{padding:0;border:none;background:transparent;cursor:pointer}.bg-pattern-base{cursor:pointer;border:2px solid #e5e7eb;border-radius:6px;background:#fff;transition:all .2s}.bg-pattern-text{padding:8px;text-align:center;font-size:12px}.bg-pattern-image{overflow:hidden;aspect-ratio:2;position:relative}.bg-pattern-img{width:100%;height:100%;object-fit:cover;opacity:.8}input[type=file].upload-flex{display:block}.upload-flex{flex:1;padding:6px;border:2px solid #e5e7eb;border-radius:6px;font-size:12px}.clear-btn{padding:8px 12px;background:#b83128;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}.hr-divider{border:none;border-top:1px solid #e5e7eb;margin:16px 0}.span-2{grid-column:span 2}.overflow-scroll{max-height:340px;overflow-y:auto}.ml-auto{margin-left:auto}.bar-label{font-family:var(--chart-font-family, "Noteworthy", sans-serif);font-weight:600;color:#333;text-align:center}.bar-value{font-family:var(--chart-font-family, "Noteworthy", sans-serif);font-weight:700;color:#333}.th-width-32{width:32%}.th-width-18{width:18%}.th-width-28{width:28%}.th-width-10{width:10%}.th-width-12{width:12%}.text-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-move{cursor:move}.cursor-text{cursor:text}.no-data-message{text-align:center;color:#9ca3af;padding:20px;font-size:13px}.bg-white-full{background:#fff;width:100%;height:40px;cursor:pointer;border:2px solid #e5e7eb;border-radius:8px}@font-face{font-family:HMT Regular;src:url(/assets/HmtRegular-WRrv-CEmi229A.ttf) format("truetype")}.sidebar-textarea{width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;resize:vertical;font-family:inherit;transition:all .2s}.sidebar-textarea:focus{outline:none;border-color:#6adadf;box-shadow:0 0 0 2px #6adadf40}.sidebar-input{width:100%;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;transition:all .2s}.sidebar-input:focus{outline:none;border-color:#6adadf;box-shadow:0 0 0 2px #6adadf40}.animation-wrapper{width:100%;max-width:860px;aspect-ratio:16 / 9;background:#4ea552;position:relative;overflow:hidden;border-radius:12px;box-shadow:0 1px 3px #00000014,0 0 0 1px #0000000a}.animation-wrapper.ratio-9-16{aspect-ratio:9 / 16;max-width:380px}.animation-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;align-content:center;flex-wrap:wrap;column-gap:12px;row-gap:calc(var(--line-spacing, 15) * 1px);padding:40px;position:absolute;top:0;left:0;cursor:grab;-webkit-user-select:none;user-select:none}.animation-stage:active,.animation-stage.dragging{cursor:grabbing}.word{display:inline-block;position:relative;padding:4px 8px;border-radius:6px;opacity:1}.word.animating{opacity:0}.word.animate{animation:flyInWithJiggle .8s ease-in forwards,jiggle .3s ease-in-out infinite}@keyframes flyInWithJiggle{0%{opacity:0;transform:translateY(150vh)}60%{opacity:1;transform:translateY(-30%)}to{opacity:1;transform:translateY(0)}}@keyframes jiggle{0%,to{rotate:0deg}25%{rotate:var(--jiggle-1, 2deg)}75%{rotate:var(--jiggle-2, -2deg)}}.reset-position-btn{position:absolute;top:10px;right:10px;z-index:100;padding:6px 12px;background:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:6px;font-size:12px;color:#636e72;cursor:pointer;transition:background .2s}.drawing-canvas-container{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:12px;overflow:hidden;width:100%;max-width:860px;aspect-ratio:16 / 9;cursor:crosshair}.drawing-canvas-container.ratio-9-16{aspect-ratio:9 / 16;max-width:380px}.drawing-canvas-container canvas{width:100%;height:100%;display:block;touch-action:none}.drawing-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;padding:8px 0}.btn-small{padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;border:none}.btn-undo{background:#f3f4f6;color:#374151}.btn-undo:hover{background:#e5e7eb}.btn-clear{background:#fee2e2;color:#b83128}.btn-clear:hover{background:#fecaca}.stroke-width-slider{width:80px;height:4px;border-radius:2px;background:#e5e7eb;outline:none;-webkit-appearance:none;cursor:pointer}.stroke-width-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#5cb860,#4ea552);cursor:pointer}.canvas-actions{display:flex;gap:8px;align-items:center;justify-content:center;padding:16px 0 0}.canvas-action-group{display:flex;gap:8px}.canvas-action-divider{width:1px;height:24px;background:#d1d5db;margin:0 4px}.canvas-action-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border:none;border-radius:8px;color:#fff;font-weight:600;font-size:12px;cursor:pointer;transition:all .15s;background:linear-gradient(135deg,#9ca3af,#6b7280);box-shadow:0 1px 3px #0000001a}.canvas-action-btn:hover{opacity:.9;box-shadow:0 2px 6px #00000026}.canvas-action-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.canvas-action-btn--danger{background:linear-gradient(135deg,#d4453b,#b83128)}.canvas-action-btn--play{background:linear-gradient(135deg,#5cb860,#4ea552)}.canvas-action-btn--stop{background:linear-gradient(135deg,#d4453b,#b83128)}.canvas-action-btn--record{background:linear-gradient(135deg,#5cb860,#4ea552)}.canvas-action-btn--record.recording{animation:pulse-recording 1s infinite}.canvas-action-btn--stop-record{background:linear-gradient(135deg,#d4453b,#b83128)}.playback-controls{display:flex;gap:8px;justify-content:center;padding:12px 0 0}.btn-play{padding:10px 24px;border:none;border-radius:8px;background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s;min-width:100px}.btn-play:hover{opacity:.9}.btn-play:disabled{opacity:.4;cursor:not-allowed}.btn-stop{padding:10px 24px;border:none;border-radius:8px;background:#b83128;color:#fff;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s;min-width:100px}.btn-stop:hover{opacity:.9}.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.export-buttons button.exporting{pointer-events:none;opacity:.8}.export-buttons button .btn-text{display:inline}.export-buttons button .btn-loading,.export-buttons button.exporting .btn-text{display:none}.export-buttons button.exporting .btn-loading{display:inline-flex;align-items:center;gap:6px}.mode-selection{display:flex;gap:6px;padding:0 20px;margin-bottom:12px}.drawing-section{display:none;padding:0 20px;margin-bottom:12px}.drawing-section.active{display:block}.text-section{display:none;padding:0 20px;margin-bottom:12px}.text-section.active{display:block}.guide-controls{margin-bottom:10px}.svg-container{position:absolute;top:0;left:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;cursor:grab;-webkit-user-select:none;user-select:none;z-index:3}.svg-container.has-content{display:flex}.svg-container:active,.svg-container.dragging{cursor:grabbing}.svg-container svg{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.svg-path{fill:none;stroke-linecap:round;stroke-linejoin:round}.svg-fill{opacity:0;transition:opacity .3s ease}.svg-fill.visible{opacity:1}.hand-image{position:absolute;width:50px;height:auto;pointer-events:none;z-index:1000;opacity:0;transition:opacity .3s;display:none}.canvas-guide{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.3;display:none;z-index:1}.canvas-drawing{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;touch-action:none}.canvas-drawing.mode-upload,.canvas-drawing.mode-text{cursor:grab}.canvas-drawing.mode-upload.dragging,.canvas-drawing.mode-text.dragging{cursor:grabbing}.canvas-animation{position:absolute;top:0;left:0;width:100%;height:100%;display:none;z-index:4}.reset-position-btn{position:absolute;top:10px;right:10px;z-index:100;padding:6px 12px;background:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:6px;font-size:12px;color:#636e72;cursor:pointer;transition:background .2s;display:none}.reset-position-btn:hover{background:#fff}.upload-area{border:2px dashed #d1d5db;border-radius:8px;padding:16px;text-align:center;background:#fafaf8;cursor:pointer;position:relative;min-height:80px;display:flex;align-items:center;justify-content:center}.textarea-input{width:100%;min-height:80px;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;transition:all .2s}.textarea-input:focus{outline:none;border-color:#6adadf;box-shadow:0 0 0 2px #6adadf40}.select-input{width:auto;padding:8px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;background:#fff;cursor:pointer;transition:all .2s}.select-input:focus{outline:none;border-color:#6adadf;box-shadow:0 0 0 2px #6adadf40}.checkbox-label{display:flex;align-items:center;gap:6px;cursor:pointer;padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff}.hand-gallery-item{border:2px solid #e5e7eb;border-radius:6px;padding:8px;cursor:pointer;background:#fff;display:flex;align-items:center;justify-content:center;height:50px;transition:all .2s}.hand-gallery-item:hover{border-color:#6adadf}.img-contain{max-width:100%;max-height:100%;object-fit:contain}.img-thumb{max-width:60px;max-height:60px;object-fit:contain}.img-preview-lg{max-width:150px;max-height:150px;object-fit:contain;margin-bottom:8px;border-radius:8px}.grid-5-col-gap-6{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.flex-col-center-gap-4{display:flex;flex-direction:column;align-items:center;gap:4px}.flex-col-center-gap-8{display:none;flex-direction:column;align-items:center;gap:8px}.text-small-indigo{font-size:11px;color:#4ea552}.text-tiny-gray{font-size:10px;color:#6b7280}.text-tiny-gray-mb{font-size:10px;color:#6b7280;margin-bottom:6px}.text-tiny-indigo{font-size:9px;color:#4ea552;cursor:pointer}.download-section{padding:0 20px 8px}.document-preview-container{position:relative;width:100%;max-height:140px;overflow:auto;background:#f9fafb;border-radius:8px;padding:8px}.document-preview-wrapper{position:relative;display:inline-block}.document-preview{display:block;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.drawing-canvas-overlay{position:absolute;top:0;left:0;cursor:crosshair;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.highlight-regions-list{max-height:120px;overflow-y:auto;padding:0 20px;margin-bottom:4px}.highlight-region-item{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#fffbeb;border-radius:6px;margin-bottom:4px;font-size:12px}.highlight-region-item .region-info{display:flex;align-items:center;gap:6px}.highlight-region-item .region-number{width:20px;height:20px;background:linear-gradient(135deg,#5cb860,#4ea552);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:10px}.highlight-region-item .delete-btn{background:none;border:none;color:#b83128;cursor:pointer;font-size:14px;padding:2px}.highlight-region-item .delete-btn:hover{color:#8c1e17}.page-navigation{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}.page-btn{background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;border:none;width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}.page-btn:disabled{opacity:.3;cursor:not-allowed}.page-info{font-size:12px;color:#374151;font-weight:500}.highlight-canvas-area{position:relative;width:100%;max-width:860px;aspect-ratio:16 / 9;background:repeating-conic-gradient(#e5e7eb 0% 25%,#f3f3ef 0% 50%) 50% / 20px 20px;border-radius:12px;overflow:hidden}.highlight-canvas-area.ratio-9-16{aspect-ratio:9 / 16;max-width:380px}.highlight-canvas-area canvas{position:absolute;top:0;left:0;width:100%;height:100%}.highlight-draw-canvas{cursor:crosshair;z-index:2}.style-settings-toggle{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#fafaf8;border-radius:8px;cursor:pointer;transition:all .2s}.style-settings-toggle:hover{background:#f3f4f6}.speed-buttons{display:flex;gap:3px}.popup-left{left:0;right:auto}.objects-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;max-height:200px;overflow-y:auto}.objects-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.objects-title{font-size:13px;font-weight:600;color:#374151}.object-item{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:#f9fafb;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:all .2s}.object-item:hover{background:#fffbeb}.object-item.active{border-color:#6adadf;background:#fffbeb}.object-item.has-path{border-left:4px solid}.object-item-row{display:flex;align-items:center;gap:10px;width:100%}.object-settings-row{display:flex;align-items:center;gap:12px;width:100%;padding-left:50px}.object-thumb{width:40px;height:40px;object-fit:contain;border-radius:6px;background:repeating-conic-gradient(#e5e7eb 0% 25%,transparent 0% 50%) 50% / 8px 8px}.object-info{flex:1;min-width:0}.object-name{font-size:12px;font-weight:600;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.object-status{font-size:10px;color:#6b7280}.object-color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.object-remove{font-size:16px;color:#9ca3af;cursor:pointer;padding:4px;line-height:1}.object-remove:hover{color:#b83128}.object-size-group{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.object-size-label{font-size:10px;color:#6b7280;white-space:nowrap}.object-size-slider{flex:1;min-width:50px;height:4px;border-radius:2px;background:#e5e7eb;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.object-size-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#5cb860,#4ea552);cursor:pointer}.object-size-value{font-size:10px;font-weight:600;color:#4ea552;min-width:28px;text-align:right}.object-align-group{display:flex;align-items:center;gap:6px;flex-shrink:0}.object-toggle-label{font-size:10px;color:#6b7280;white-space:nowrap}.object-drag-handle{cursor:grab;color:#9ca3af;padding:4px 2px;display:flex;flex-direction:column;gap:2px;-webkit-user-select:none;user-select:none}.object-drag-handle:hover{color:#6b7280}.object-drag-handle:active{cursor:grabbing}.drag-handle-line{width:12px;height:2px;background:currentColor;border-radius:1px}.object-item.dragging{opacity:.5;background:#fef3c7}.object-item.drag-over{border-top:2px solid #6adadf}.object-item.drag-over-bottom{border-bottom:2px solid #6adadf}.path-color-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.btn-add-object{padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;border:1.5px solid #6adadf;background:#fff;color:#4ea552;margin-bottom:12px}.btn-add-object:hover{background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff}.toggle-switch-checkbox{position:relative;width:36px;height:20px;flex-shrink:0}.toggle-switch-checkbox input{opacity:0;width:0;height:0}.toggle-slider-checkbox{position:absolute;cursor:pointer;inset:0;background-color:#e5e7eb;transition:.3s;border-radius:20px}.toggle-slider-checkbox:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%;box-shadow:0 1px 3px #0003}.toggle-switch-checkbox input:checked+.toggle-slider-checkbox{background:linear-gradient(135deg,#5cb860,#4ea552)}.toggle-switch-checkbox input:checked+.toggle-slider-checkbox:before{transform:translate(16px)}@keyframes pulse-recording{0%,to{opacity:1}50%{opacity:.7}}.recording-indicator{position:absolute;top:10px;right:10px;background:#b83128e6;color:#fff;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;display:none;align-items:center;gap:6px;z-index:10}.recording-indicator.visible{display:flex}.recording-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:blink-dot 1s infinite}@keyframes blink-dot{0%,to{opacity:1}50%{opacity:.3}}.drawing-canvas-container.recording,.preview-content.recording{border-color:#b83128;box-shadow:0 0 0 3px #b8312833}.timing-info{margin-top:8px;padding:6px 12px;background:#fffbeb;border-radius:8px;border:1px solid #fde68a;text-align:center}.animated-object{position:absolute;pointer-events:none;transform-origin:center center}.drawing-object-marker{position:absolute;pointer-events:none;transform:translate(-50%,-50%);z-index:5;transition:none}.drawing-object-marker img{width:30px;height:30px;object-fit:contain;border-radius:4px;box-shadow:0 2px 6px #0000004d}.upload-area-small{border:1.5px dashed #d1d5db;border-radius:8px;padding:10px;text-align:center;background:#fafaf8;cursor:pointer;min-height:40px;display:flex;align-items:center;justify-content:center}.upload-area-small:hover{border-color:#6adadf;background:#fffbeb}.text-tiny-red{font-size:9px;color:#b83128;cursor:pointer}.border-top{border-top:1px solid #e5e7eb;padding-top:12px}.mt-12{margin-top:12px}.aspect-btns{display:flex;gap:3px}.aspect-btn{padding:4px 8px;border:1.5px solid #e5e7eb;border-radius:6px;background:#fff;font-size:12px;font-weight:500;color:#9ca3af;cursor:pointer;transition:all .15s}.aspect-btn:hover{border-color:#6adadf;color:#4ea552}.aspect-btn.active{background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;border-color:#4ea552}.popup-menu.left{right:auto;left:0}.btn-primary.loading{pointer-events:none;opacity:.7}.btn-primary.loading:after{content:"";display:inline-block;width:14px;height:14px;margin-left:8px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}.category-tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap;padding:0 20px}.category-tab{padding:5px 10px;border:1.5px solid #e5e7eb;border-radius:6px;background:#fff;color:#374151;font-weight:500;cursor:pointer;transition:all .15s;font-size:12px}.category-tab:hover{border-color:#6adadf;color:#4ea552}.category-tab.active{background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;border-color:#4ea552}.tab-count{font-size:10px;opacity:.8;margin-left:2px}.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:3px;margin-bottom:12px;max-height:220px;overflow-y:auto;padding:0 20px 4px}.char-cell{aspect-ratio:1;border:1.5px solid #e5e7eb;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;font-weight:600;transition:all .15s;position:relative;background:#fff;color:#374151;-webkit-user-select:none;user-select:none}.char-cell:hover{border-color:#6adadf;color:#4ea552}.char-cell.active{background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;border-color:#4ea552}.char-cell.done{border-color:#4ea552;background:#e8f5e9;color:#4ea552}.char-cell.done.active{background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;border-color:#4ea552}.char-cell.done:after{content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px;background:#4ea552;border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");background-size:7px;background-repeat:no-repeat;background-position:center}.char-cell .char-preview{position:absolute;inset:0;border-radius:5px;overflow:hidden}.char-cell .char-preview img{width:100%;height:100%;object-fit:contain}.viet-section-label{font-size:11px;font-weight:600;color:#6b7280;margin:8px 0 6px 2px;text-transform:uppercase;letter-spacing:.5px;grid-column:1 / -1}.right-panel{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0;height:calc(100vh - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:4px}.right-panel::-webkit-scrollbar{width:4px}.right-panel::-webkit-scrollbar-track{background:transparent;margin:8px 0}.right-panel::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}.letter-drawing-area{background:#fff;border-radius:16px;box-shadow:0 1px 3px #0000000f,0 0 0 1px #0000000a;padding:20px;display:flex;flex-direction:column;align-items:center;flex-shrink:0;overflow:hidden}.letter-drawing-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:12px}.current-char-info{display:flex;align-items:center;gap:10px}.current-char-badge{width:40px;height:40px;background:linear-gradient(135deg,#5cb860,#4ea552);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:20px}.current-char-label{font-size:13px;color:#6b7280}.letter-canvas-container{position:relative;border:2px solid #e5e7eb;border-radius:12px;overflow:hidden;width:100%;max-width:560px;aspect-ratio:4 / 3;background:#fff;cursor:crosshair;flex-shrink:0;min-height:0}.letter-canvas-container canvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0}.letter-canvas-container canvas.guide-canvas{z-index:1;pointer-events:none}.letter-canvas-container canvas.draw-canvas{z-index:2;touch-action:none}.letter-controls{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px;flex-wrap:wrap}.letter-controls .canvas-action-btn{padding:8px 16px;font-size:12px}.sentence-preview-area{background:#fff;border-radius:16px;box-shadow:0 1px 3px #0000000f,0 0 0 1px #0000000a;padding:20px;flex:1;min-height:200px;display:flex;flex-direction:column;overflow:hidden}.sentence-preview-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sentence-preview-title{font-size:13px;font-weight:600;color:#444;text-transform:uppercase;letter-spacing:.5px}.sentence-textarea{width:100%;min-height:60px;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;resize:vertical;transition:all .2s;margin-bottom:10px}.sentence-textarea:focus{outline:none;border-color:#6adadf;box-shadow:0 0 0 2px #6adadf40}.sentence-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}.sentence-svg-container{width:100%;min-height:0;flex:1;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;overflow:auto;display:flex;align-items:center;justify-content:center}.sentence-svg-container svg{display:block;width:100%;height:auto}.sentence-playback{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:10px}.progress-section{padding:0 20px;margin-bottom:8px}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.progress-label{font-size:12px;font-weight:600;color:#374151}.progress-count{font-size:12px;font-weight:600;color:#4ea552}.progress-bar{height:6px;background:#f3f4f6;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(135deg,#6adadf,#4ea552);border-radius:3px;transition:width .3s ease;width:0%}.font-name-group{padding:0 20px 14px;margin-bottom:14px;border-bottom:1px solid #f3f4f6}.font-name-label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:4px}.font-name-input{width:100%;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;transition:all .2s}.font-name-input:focus{outline:none;border-color:#6adadf;box-shadow:0 0 0 2px #6adadf40}.import-hint{font-size:12px;color:#6b7280;padding:0 20px 12px;margin-bottom:16px;border-bottom:1px solid #f3f4f6}.btn-import{background:none;border:none;color:#4ea552;font-size:12px;font-weight:600;padding:0;cursor:pointer;text-decoration:underline;text-decoration-style:dashed;text-underline-offset:3px}.btn-import:hover{color:#3d8b40;text-decoration-style:solid}.toggle-group-compact{display:flex;gap:2px;background:#f3f4f6;border-radius:6px;padding:2px}.toggle-btn{padding:4px 8px;font-size:11px;font-weight:600;border:none;border-radius:5px;background:transparent;color:#9ca3af;cursor:pointer;transition:all .15s;white-space:nowrap;display:flex;align-items:center;justify-content:center}.toggle-btn.active{background:#fff;color:#374151;box-shadow:0 1px 3px #0000001a}.toggle-btn:hover:not(.active){color:#374151}.stroke-width-control{display:flex;align-items:center;gap:8px}.btn-done{background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;border:none;padding:7px 14px;border-radius:8px;font-weight:600;font-size:12px;cursor:pointer;transition:all .15s}.btn-done:hover{opacity:.9}.btn-done:disabled{opacity:.35;cursor:not-allowed}.btn-nav{background:#f3f4f6;color:#374151;border:none;padding:7px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}.btn-nav:hover{background:#e5e7eb}.save-toast{position:fixed;bottom:20px;right:20px;background:linear-gradient(135deg,#5cb860,#4ea552);color:#fff;padding:10px 18px;border-radius:10px;font-weight:600;font-size:13px;box-shadow:0 4px 12px #4ea5524d;z-index:1000;opacity:0;transform:translateY(20px);transition:all .3s ease;pointer-events:none}.save-toast.show{opacity:1;transform:translateY(0)}.sidebar-auth-bar{display:flex;align-items:center;gap:8px;padding:8px 20px 12px;border-bottom:1px solid #f0f0ec;margin-bottom:4px;min-height:36px}.sidebar-auth-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#6b7280;text-decoration:none;cursor:pointer;transition:color .2s ease}.sidebar-auth-link:hover{color:#f59e0b}.sidebar-user-menu{display:flex;align-items:center;gap:8px;width:100%}.sidebar-user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1.5px solid #e5e7eb;flex-shrink:0}.sidebar-user-name{font-size:12px;font-weight:600;color:#374151;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-profile-link{font-size:11px;font-weight:600;color:#f59e0b;text-decoration:none;white-space:nowrap}.sidebar-profile-link:hover{color:#d97706}.btn-favorite{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;border:1.5px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;transition:all .2s ease;color:#9ca3af;position:relative}.btn-favorite:hover{border-color:#f59e0b;color:#f59e0b;background:#fffbeb}.btn-favorite.favorited{background:#fef3c7;border-color:#f59e0b;color:#f59e0b}.btn-favorite.favorited svg{fill:#f59e0b}.btn-favorite.disabled{opacity:.5;cursor:not-allowed}.btn-favorite.disabled:hover{border-color:#e5e7eb;color:#9ca3af;background:#fff}.btn-favorite-tooltip{display:none;position:fixed;background:#1f2937;color:#fff;padding:6px 10px;border-radius:6px;font-size:11px;font-weight:500;white-space:nowrap;z-index:10000;pointer-events:none}.btn-favorite-tooltip:after{content:"";position:absolute;top:100%;left:var(--arrow-left, 50%);transform:translate(-50%);border:5px solid transparent;border-top-color:#1f2937}.fav-popup{position:fixed;background:#fff;border:1.5px solid #e5e7eb;border-radius:12px;padding:0;width:260px;max-height:400px;display:flex;flex-direction:column;box-shadow:0 8px 24px #0000001f;z-index:10000;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.fav-popup-header{font-size:.8rem;font-weight:700;color:#1a1a1a;padding:12px 14px 8px}.fav-popup-list{overflow-y:auto;max-height:220px;padding:0 6px}.fav-popup-loading,.fav-popup-empty{font-size:.75rem;color:#9ca3af;padding:12px 8px;text-align:center}.fav-popup-item{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:8px;transition:background .15s ease}.fav-popup-item:hover{background:#f9fafb}.fav-popup-item-name{flex:1;font-size:.78rem;color:#374151;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.fav-popup-item-name:hover{color:#f59e0b}.fav-popup-item-delete{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border:none;background:none;border-radius:6px;color:#d1d5db;cursor:pointer;transition:all .15s ease}.fav-popup-item-delete:hover{background:#fee2e2;color:#ef4444}.fav-popup-item-deleting{opacity:.4;pointer-events:none}.fav-popup-divider{height:1px;background:#e5e7eb;margin:4px 14px}.fav-popup-add-btn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px 12px;border:none;background:none;font-size:.78rem;font-weight:600;font-family:inherit;color:#f59e0b;cursor:pointer;transition:background .15s ease;border-radius:0 0 12px 12px}.fav-popup-add-btn:hover{background:#fffbeb}.fav-popup-save-form{padding:0 14px 12px}.fav-popup-save-input{width:100%;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.78rem;font-family:inherit;outline:none;transition:border-color .2s ease;box-sizing:border-box}.fav-popup-save-input:focus{border-color:#f59e0b}.fav-popup-save-actions{display:flex;gap:6px;margin-top:8px}.fav-popup-save-cancel,.fav-popup-save-confirm{flex:1;padding:7px 0;border-radius:8px;font-size:.75rem;font-weight:600;font-family:inherit;cursor:pointer;border:none;transition:all .15s ease}.fav-popup-save-cancel{background:#f3f4f6;color:#6b7280}.fav-popup-save-cancel:hover{background:#e5e7eb}.fav-popup-save-confirm{background:#f59e0b;color:#fff}.fav-popup-save-confirm:hover{background:#d97706}.fav-popup-save-confirm:disabled{opacity:.6;cursor:not-allowed}.feedback-trigger{position:fixed;bottom:18px;right:24px;font-family:Inter,sans-serif;font-size:.8rem;font-weight:500;color:#aaa;cursor:pointer;z-index:999;transition:color .2s ease;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:4px}.feedback-trigger .feedback-icon{width:20px;height:20px;opacity:.5;transition:opacity .2s ease}.feedback-trigger:hover .feedback-icon{opacity:.7}.feedback-trigger:hover{color:#666}.feedback-overlay{display:none;position:fixed;inset:0;background:#00000059;z-index:10000;justify-content:center;align-items:center}.feedback-overlay.open{display:flex}.feedback-popup{background:#fff;border-radius:16px;padding:32px;width:90%;max-width:460px;position:relative;box-shadow:0 20px 60px #00000026}.feedback-popup-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:1.3rem;cursor:pointer;color:#999;transition:color .2s}.feedback-popup-close:hover{color:#333}.feedback-popup h3{font-family:Inter,sans-serif;font-size:1.15rem;font-weight:700;color:#1a1a1a;margin-bottom:20px}.feedback-popup .fb-field{margin-bottom:16px}.feedback-popup .fb-field label{display:block;font-size:.95rem;font-weight:600;color:#1a1a1a;margin-bottom:6px}.feedback-popup .fb-field label .optional{font-weight:400;color:#999}.feedback-popup .fb-field input,.feedback-popup .fb-field textarea,.feedback-popup .fb-field select{width:100%;padding:12px 14px;border:2px solid #1a1a1a;border-radius:10px;font-family:Inter,sans-serif;font-size:.95rem;background:#fff;color:#1a1a1a;outline:none;transition:box-shadow .2s ease}.feedback-popup .fb-field select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}.feedback-popup .fb-field input:focus,.feedback-popup .fb-field textarea:focus,.feedback-popup .fb-field select:focus{box-shadow:3px 3px #f0d56e}.feedback-popup .fb-field textarea{resize:vertical;min-height:120px;line-height:1.5}.feedback-popup .fb-submit{padding:14px 40px;background:#1a1a1a;color:#fff;border:none;border-radius:100px;font-family:Inter,sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .25s ease;margin-top:8px}.feedback-popup .fb-submit:hover{background:#000;transform:translateY(-2px);box-shadow:0 8px 24px #00000026}.feedback-popup .fb-success{text-align:center;padding:24px 0;display:none}.feedback-popup .fb-success .checkmark{font-size:2.5rem;margin-bottom:12px}.feedback-popup .fb-success h4{font-size:1.5rem;font-weight:700;color:#1a1a1a;margin-bottom:6px}.feedback-popup .fb-success p{font-size:.9rem;color:#777}.logo-title-row{display:flex;align-items:center;gap:6px;position:relative}.logo-title-row .logo-title{cursor:pointer}.tool-switcher-toggle{background:none;border:none;cursor:pointer;padding:2px 4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .15s ease;flex-shrink:0}.tool-switcher-toggle:hover{background:#0000000f}.tool-switcher-toggle svg{width:14px;height:14px;fill:none;stroke:#636e72;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease,stroke .15s ease}.tool-switcher-toggle:hover svg{stroke:#2d3436}.tool-switcher-toggle.open svg{transform:rotate(180deg)}.tool-switcher-dropdown{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1.5px solid #1a1a1a;border-radius:10px;box-shadow:4px 4px #1a1a1a;min-width:200px;padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:999}.tool-switcher-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}.tool-switcher-dropdown a{display:flex;align-items:center;gap:8px;padding:9px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.84rem;font-weight:500;color:#1a1a1a;text-decoration:none;transition:background .15s ease}.tool-switcher-dropdown a:hover{background:#f5f5f0}.tool-switcher-dropdown a.current-tool{font-weight:700;background:#fef9e7;color:#b45309}.tool-switcher-dropdown a.current-tool:hover{background:#fef3c7}