*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.rounded{border-radius:.25rem}.border{border-width:1px}.border-gray-200{--tw-border-opacity:1;border-color:#e5e7eb;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-green-200{--tw-border-opacity:1;border-color:#bbf7d0;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:#fecaca;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-yellow-200{--tw-border-opacity:1;border-color:#fef08a;border-color:rgb(254 240 138/var(--tw-border-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:#f9fafb;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:#f0fdf4;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:#fef2f2;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-yellow-50{--tw-bg-opacity:1;background-color:#fefce8;background-color:rgb(254 252 232/var(--tw-bg-opacity,1))}.p-1{padding:.25rem}.capitalize{text-transform:capitalize}.italic{font-style:italic}.text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:#22c55e;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:#ef4444;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-yellow-500{--tw-text-opacity:1;color:#eab308;color:rgb(234 179 8/var(--tw-text-opacity,1))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}body{margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.form-textarea{word-wrap:break-word;font-family:inherit;line-height:1.5;min-height:80px;resize:vertical;white-space:pre-wrap}.form-textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;outline:none}.live-data-token-panel{max-width:600px!important;min-width:300px!important;width:300px!important}.live-data-token-panel .field-row{background:#f8f9fa;border-radius:6px;display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:8px}.live-data-token-panel .field-label{align-items:center;color:#374151;display:flex;font-size:12px;font-weight:600;gap:4px;margin-bottom:4px;text-align:left}.live-data-token-panel .field-input{background:#fff;border:1px solid #d1d5db;border-radius:6px;box-sizing:border-box;color:#111827;font-size:14px;min-width:0!important;padding:8px 12px;width:100%!important}.live-data-token-panel .field-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;outline:none}.live-data-token-panel .image-field-container{display:flex;flex-direction:column;gap:8px;width:100%}.live-data-image-field-container{align-items:flex-start;display:flex;gap:8px;width:100%}.live-data-image-preview-side{flex-shrink:0;height:60px;width:60px}.live-data-preview-image-container{background:#f9fafb;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;height:100%;overflow:hidden;transition:border-color .2s ease;width:100%}.live-data-preview-image-container:hover{border-color:#3b82f6}.live-data-preview-image{display:block;height:100%;object-fit:cover;width:100%}.live-data-preview-placeholder{align-items:center;background:#f9fafb;border:1px dashed #d1d5db;border-radius:6px;color:#9ca3af;display:flex;flex-direction:column;font-size:10px;gap:2px;height:100%;justify-content:center;width:100%}.live-data-file-upload-side{display:flex;flex:1 1;flex-direction:column;gap:4px;min-width:0}.live-data-file-input-side{background:#fff!important;border:1px solid #d1d5db!important;border-radius:4px!important;box-sizing:border-box!important;color:#374151!important;cursor:pointer!important;font-size:12px!important;padding:6px 8px!important;transition:all .2s ease!important;width:100%!important}.live-data-file-input-side:hover{background:#f8fafc!important;border-color:#3b82f6!important}.live-data-file-input-side:focus{border-color:#3b82f6!important;box-shadow:0 0 0 2px #3b82f61a!important;outline:none!important}.live-data-upload-indicator{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:3px;color:#059669;font-size:11px;padding:2px 4px;text-align:center}.live-data-token-panel .checkbox-group,.live-data-token-panel .radio-group{display:flex;flex-direction:column;gap:6px;width:100%}.live-data-token-panel .checkbox-group label,.live-data-token-panel .radio-group label{align-items:center;color:#374151;cursor:pointer;display:flex;font-size:13px;gap:6px;padding:4px 0}.live-data-token-panel .checkbox-group input[type=checkbox],.live-data-token-panel .radio-group input[type=radio]{cursor:pointer;margin:0}.live-data-token-panel select,.live-data-token-panel textarea{background:#fff;border:1px solid #d1d5db;border-radius:6px;box-sizing:border-box;color:#111827;font-size:14px;padding:8px 12px;width:100%!important}.live-data-token-panel textarea{font-family:inherit;min-height:60px;resize:vertical}.live-data-token-panel .reset-button{align-items:center;background:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;color:#6b7280;cursor:pointer;display:flex;flex-shrink:0;height:24px;justify-content:center;min-width:24px;padding:4px}.live-data-token-panel .reset-button:hover{background:#e5e7eb;color:#374151}.file-input-container-side-by-side{align-items:flex-start;display:flex;gap:12px;width:100%}.image-preview-side{flex-shrink:0;height:80px;width:80px}.preview-image-container{background:#f9fafb;border:2px solid #e5e7eb;border-radius:8px;height:100%;overflow:hidden;width:100%}.preview-image{display:block;height:100%;object-fit:cover;width:100%}.preview-placeholder{align-items:center;background:#f9fafb;border:2px dashed #d1d5db;border-radius:8px;color:#9ca3af;display:flex;flex-direction:column;font-size:11px;gap:4px;height:100%;justify-content:center;width:100%}.file-upload-side{display:flex;flex:1 1;flex-direction:column;gap:6px;min-width:0}.file-input-side{background:#fff!important;border:1px solid #d1d5db!important;border-radius:6px!important;color:#374151!important;cursor:pointer!important;font-size:13px!important;padding:8px 12px!important;transition:all .2s ease!important;width:100%!important}.file-input-side:hover{background:#f8fafc!important;border-color:#3b82f6!important}.file-input-side:focus{border-color:#3b82f6!important;box-shadow:0 0 0 2px #3b82f61a!important;outline:none!important}.file-name-display{background:#f0f9ff;border:1px solid #bae6fd;border-radius:4px;color:#0369a1;font-size:12px;overflow:hidden;padding:4px 8px;text-overflow:ellipsis;white-space:nowrap}@media (max-width:768px){.live-data-token-panel{max-width:calc(100vw - 20px)!important;min-width:300px!important;width:calc(100vw - 20px)!important}.file-input-container-side-by-side{flex-direction:column;gap:8px}.image-preview-side{align-self:center;height:60px;width:100%}.preview-placeholder{flex-direction:row;gap:8px}.live-data-image-field-container{flex-direction:column;gap:6px}.live-data-image-preview-side{align-self:center;height:50px;width:100%}.live-data-preview-placeholder{flex-direction:row;gap:6px}}.print-status-display{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;display:flex;font-size:12px;margin-left:8px;padding:4px 8px}.print-status-value{border-radius:4px;font-weight:600;padding:2px 6px;text-transform:capitalize}.print-status-printed{background:#dcfce7;border:1px solid #bbf7d0;color:#166534}.print-status-pending{background:#fef3c7;border:1px solid #fde68a;color:#92400e}.print-status-not_printed{background:#fee2e2;border:1px solid #fecaca;color:#991b1b}.print-status-failed{background:#f3f4f6;border:1px solid #d1d5db;color:#374151}.search-toggle-button{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;cursor:pointer;display:flex;justify-content:center;margin-left:8px;padding:6px 8px;transition:all .2s ease}.search-toggle-button:hover{background:#e2e8f0;color:#374151}.search-controls-below{background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;left:50%;min-width:400px;padding:12px;position:fixed;top:60px;transform:translateX(-50%);z-index:1000}.search-controls{align-items:center;display:flex;gap:8px;width:100%}.search-field-select{background:#fff;border:1px solid #d1d5db;border-radius:6px;color:#374151;cursor:pointer;flex-shrink:0;font-size:14px;min-width:140px;padding:8px 12px}.search-field-select:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a;outline:none}.search-value-input{background:#fff;border:1px solid #d1d5db;border-radius:6px;color:#374151;flex:1 1;font-size:14px;min-width:200px;padding:8px 12px}.search-value-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a;outline:none}.search-execute-button{align-items:center;background:#3b82f6;border:1px solid #3b82f6;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;justify-content:center;padding:8px 12px;transition:all .2s ease}.search-execute-button:hover:not(:disabled){background:#2563eb;border-color:#2563eb;transform:translateY(-1px)}.search-execute-button:disabled{background:#9ca3af;border-color:#9ca3af;cursor:not-allowed;transform:none}.search-clear-button{align-items:center;background:#ef4444;border:1px solid #ef4444;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;justify-content:center;padding:8px 12px;transition:all .2s ease}.search-clear-button:hover{background:#dc2626;border-color:#dc2626;transform:translateY(-1px)}.create-button{border:1px solid #10b981;border-radius:6px;min-width:36px;padding:8px}.create-button:hover:not(:disabled){border-color:#059669}.create-button:disabled{border-color:#9ca3af}.delete-button{background:#ef4444;border:1px solid #ef4444;border-radius:6px;min-width:36px;padding:8px}.delete-button:hover:not(:disabled){background:#dc2626;border-color:#dc2626}.delete-button:disabled{border-color:#9ca3af}.nav-button.r2p-next,.nav-button.r2p-prev{background:#f59e0b;border:1px solid #f59e0b;color:#fff;font-weight:600}.nav-button.r2p-next:hover:not(:disabled),.nav-button.r2p-prev:hover:not(:disabled){background:#d97706;border-color:#d97706;transform:translateY(-1px)}.nav-button.r2p-next:disabled,.nav-button.r2p-prev:disabled{background:#9ca3af;border-color:#9ca3af;cursor:not-allowed;transform:none}.img-gallery-overlay{background:#00000073;z-index:1100}.img-gallery{background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:12px;height:min(90vh,900px);width:min(1200px,96vw)}.img-gallery .header{background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);gap:8px;padding:12px 16px}.img-gallery .header .title{color:#333;color:var(--text-primary)}.img-gallery .toolbar{background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);gap:12px;padding:10px 16px}.img-gallery .toolbar .search{background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:6px;color:#333;color:var(--text-primary)}.img-gallery .toolbar .search input{color:#333;color:var(--text-primary);min-width:260px}.img-gallery .toolbar select{padding:6px 8px}.img-gallery .toolbar .icon-btn,.img-gallery .toolbar select{background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:6px;color:#333;color:var(--text-primary)}.img-gallery .toolbar .icon-btn{padding:6px}.img-gallery .content{background:#fff;background:var(--primary-bg);padding:16px}.img-gallery .content.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.img-gallery .img-item.grid{background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px}.img-gallery .img-item .thumb{align-items:center;aspect-ratio:4/3;background:#fff;background:var(--primary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);display:flex;justify-content:center;overflow:hidden}.img-gallery .img-item .thumb img{height:100%;object-fit:cover;width:100%}.img-gallery .img-item .meta{color:#333;color:var(--text-primary);font-size:12px;padding:8px}.img-gallery .img-item .actions{display:flex;gap:6px;padding:8px}.img-gallery .img-item .btn.small{align-items:center;background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:6px;color:#333;color:var(--text-primary);cursor:pointer;display:inline-flex;gap:6px;padding:4px 8px}.img-gallery .img-item .btn.small.danger{background:#fee2e2;border-color:#fecaca;color:#991b1b}.img-gallery .empty,.img-gallery .loading{color:#666;color:var(--text-secondary);padding:16px;text-align:center}:root{--primary-bg:#fff;--secondary-bg:#f8f9fa;--panel-bg:#fff;--border-color:#e0e0e0;--text-primary:#333;--text-secondary:#666;--accent-color:#667eea;--accent-hover:#5a6fd8;--danger-color:#e74c3c;--success-color:#27ae60;--grid-color:#e5e5e5}[data-theme=dark]{--primary-bg:#1a1a1a;--secondary-bg:#2d2d2d;--panel-bg:#404040;--border-color:#555;--text-primary:#fff;--text-secondary:#ccc;--accent-color:#667eea;--accent-hover:#5a6fd8;--danger-color:#e74c3c;--success-color:#27ae60;--grid-color:#404040}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;background-color:var(--primary-bg);color:#333;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;transition:background-color .3s ease,color .3s ease}.App{height:100vh;overflow:hidden;width:100%}.landing-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:2rem;text-align:center}.landing-hero{margin-bottom:3rem;max-width:800px}.landing-title{-webkit-text-fill-color:#0000;background:linear-gradient(45deg,#fff,#f0f0f0);-webkit-background-clip:text;background-clip:text;font-size:4rem;font-weight:700;margin-bottom:1rem}.landing-subtitle{color:#e0e0e0;font-size:1.5rem;line-height:1.6;margin-bottom:2rem}.cta-button{background:linear-gradient(45deg,#ff6b6b,#ee5a24);border:none;border-radius:50px;box-shadow:0 8px 25px #ee5a244d;color:#fff;cursor:pointer;font-size:1.2rem;font-weight:600;padding:1rem 2rem;transition:all .3s ease}.cta-button:hover{box-shadow:0 12px 35px #ee5a2466;transform:translateY(-2px)}.features-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));max-width:1000px;width:100%}.feature-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:2rem;transition:transform .3s ease}.feature-card:hover{transform:translateY(-5px)}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-title{font-size:1.3rem;font-weight:600;margin-bottom:.5rem}.feature-description{color:#e0e0e0;line-height:1.5}.editor-container{display:flex;height:100vh;padding-top:64px;position:relative;transition:background-color .3s ease}.editor-container,.editor-container.dark-theme{background:#fff;background:var(--primary-bg)}.sidebar-toggle{align-items:center;background:#667eea;background:var(--accent-color);border:none;border-radius:0 8px 8px 0;box-shadow:2px 0 8px #00000026;color:#fff;cursor:pointer;display:flex;height:48px;justify-content:center;position:fixed;top:50%;transform:translateY(-50%);transition:all .3s ease;width:32px;z-index:1000}.sidebar-toggle:hover{background:#5a6fd8;background:var(--accent-hover);transform:translateY(-50%) scale(1.05)}.sidebar-toggle.left-toggle{border-radius:0 8px 8px 0;left:0}.sidebar-toggle.left-toggle.collapsed{left:0}.sidebar-toggle.right-toggle{border-radius:8px 0 0 8px;right:0}.sidebar-toggle.right-toggle.collapsed{right:0}.sidebar-toggle.collapsed{opacity:.8}.sidebar-toggle.collapsed:hover{opacity:1}.left-sidebar{background:#fff;background:var(--panel-bg);border-right:1px solid #e0e0e0;border-right:1px solid var(--border-color);display:flex;flex-direction:column;overflow-y:auto;transform:translateX(0);transition:all .3s ease;width:280px}.left-sidebar.collapsed{border-right:none;overflow:hidden;transform:translateX(-100%);width:0}.toolbar{background:#0000;display:flex;flex-direction:column;overflow-y:auto;transition:all .3s ease;width:100%}.toolbar-header{background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);padding:1rem}.toolbar-title{color:#333;color:var(--text-primary);font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.toolbar-subtitle{color:#666;color:var(--text-secondary);font-size:.8rem}.toolbar-section{border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);padding:1rem}.toolbar-section-title{align-items:center;color:#666;color:var(--text-secondary);display:flex;font-size:.9rem;font-weight:600;gap:.5rem;letter-spacing:.5px;margin-bottom:.75rem;text-transform:uppercase}.tab-navigation{display:flex;gap:.25rem;margin-bottom:1rem}.tab-button{background:#e5e7eb;border-radius:6px;flex:1 1;font-size:.8rem;padding:.5rem;transition:all .3s ease}.tab-button:hover{background:#667eea;background:var(--accent-color);color:#fff}.tab-button.active,[data-theme=light] .tab-button.active{background:#667eea;background:var(--accent-color);border-color:#667eea;border-color:var(--accent-color);color:#fff}[data-theme=light] .tab-button:hover{background:#e5e7eb;color:#374151}[data-theme=light] .tab-button:hover.active{background:#667eea;background:var(--accent-color);color:#fff}.tool-grid{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr)}.tool-item{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;justify-content:center;padding:.6rem;position:relative;text-align:center;transition:all .3s ease}.tool-item:hover{background:#667eea;background:var(--accent-color);box-shadow:0 4px 12px #667eea4d;color:#fff;transform:translateY(-2px)}.tool-icon{color:inherit}.upload-info{background:#f8f9fa;background:var(--secondary-bg);border-radius:6px;color:#666;color:var(--text-secondary);font-size:.8rem;margin-top:1rem;padding:.75rem}.templates-grid{grid-gap:.75rem;gap:.75rem;grid-template-columns:1fr}.template-item{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;gap:.75rem;padding:.75rem;transition:all .3s ease}.template-item:hover{background:#667eea;background:var(--accent-color);color:#fff;transform:translateY(-2px)}.template-preview{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);background:linear-gradient(135deg,var(--accent-color),#764ba2);border-radius:6px;color:#fff;display:flex;flex-shrink:0;font-size:1.2rem;font-weight:600;height:40px;justify-content:center;width:40px}.template-info{flex:1 1}.template-name{display:block;font-size:.9rem;font-weight:500}.template-category{font-size:.7rem;letter-spacing:.5px;opacity:.7;text-transform:uppercase}.quick-actions{grid-gap:.5rem;display:grid;gap:.5rem}.quick-action-btn{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;display:flex;font-size:.9rem;gap:.5rem;padding:.75rem;transition:all .3s ease}.quick-action-btn:hover{background:#667eea;background:var(--accent-color);color:#fff}.shortcuts-list{grid-gap:.25rem;display:grid;gap:.25rem}.shortcut-item{align-items:center;display:flex;font-size:.8rem;justify-content:space-between;padding:.25rem 0}kbd{border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:3px;font-family:monospace;font-size:.7rem;padding:.2rem .4rem}.canvas-area,kbd{background:#f8f9fa;background:var(--secondary-bg)}.canvas-area{display:flex;flex:1 1;flex-direction:column;position:relative}.floating-bottom-toolbar{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:12px;bottom:20px;box-shadow:0 8px 32px #0000001a;display:flex;flex-wrap:nowrap;gap:4px;height:52px;justify-content:flex-start;left:50%;max-width:90vw;min-width:200px;overflow:hidden;padding:0;position:fixed;transform:translateX(-50%);z-index:1000}.floating-bottom-toolbar .tool-button{align-items:center;background:#0000;border:none;border-radius:8px;color:#333;color:var(--text-primary);cursor:pointer;display:flex;font-size:14px;height:36px;justify-content:center;position:relative;transition:all .2s ease;width:36px}.floating-bottom-toolbar .tool-button:hover{background:#0000000f;color:#333;color:var(--text-primary)}.floating-bottom-toolbar .tool-button.active{background:#3b82f626;border:1px solid #3b82f640;color:#3b82f6}.floating-bottom-toolbar.dragging{box-shadow:0 12px 40px #0003;height:52px!important;max-height:52px!important;min-height:52px!important;transform:scale(1.02);transition:none}.floating-bottom-toolbar .toolbar-background{align-items:center;border-radius:12px;display:flex;flex-shrink:0;gap:4px;height:52px;overflow:hidden;padding:8px 12px;width:100%}.floating-bottom-toolbar .drag-handle{align-items:center;background:#0000!important;border:none!important;border-radius:4px;color:#666;color:var(--text-secondary);cursor:grab;display:flex;height:24px;justify-content:center;margin-right:4px;transition:all .2s ease;width:24px}.floating-bottom-toolbar .drag-handle:hover{background:#0000000f!important;color:#333;color:var(--text-primary)}.floating-bottom-toolbar.dragging .drag-handle{background:#0000001a!important;cursor:grabbing}.floating-bottom-toolbar .drag-handle.active,.floating-bottom-toolbar .drag-handle:active,.floating-bottom-toolbar .drag-handle:focus,.floating-bottom-toolbar .drag-handle:focus-visible{background:#0000!important;border:none!important;box-shadow:none!important;color:#666!important;color:var(--text-secondary)!important;outline:none!important}.floating-bottom-toolbar .drag-handle{position:relative;z-index:1}.floating-bottom-toolbar .drag-handle *{pointer-events:none}.live-data-token-panel.dragging{box-shadow:0 12px 40px #0003;transform:scale(1.02);transition:none}.live-data-token-panel .panel-header{cursor:grab;-webkit-user-select:none;user-select:none}.live-data-token-panel.dragging .panel-header{cursor:grabbing}.live-data-token-panel .header-actions,.live-data-token-panel .header-actions button{pointer-events:auto}.tool-dropdown{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px;bottom:100%;box-shadow:0 8px 24px #0000001f;left:50%;margin-bottom:8px;min-width:200px;padding:8px 0;position:absolute;transform:translateX(-50%);z-index:1001;.live-data-top-bar.dragging{box-shadow:0 10px 30px #0000002e;transform:scale(1.01)}.live-data-top-bar .live-topbar-handle{align-items:center;border-radius:4px;color:#666;color:var(--text-secondary);cursor:grab;display:flex;height:24px;justify-content:center;margin-right:8px;width:24px}.live-data-top-bar.dragging .live-topbar-handle{cursor:grabbing}.live-data-top-bar .drag-dots{pointer-events:none}}.tool-dropdown-item{align-items:center;color:#333;color:var(--text-primary);cursor:pointer;display:flex;font-size:14px;gap:12px;padding:8px 16px;transition:background-color .2s ease}.tool-dropdown-item:hover{background:#f8f9fa;background:var(--secondary-bg)}.tool-dropdown-item.active{background:#3b82f626;color:#3b82f6}.tool-dropdown-item .tool-icon{align-items:center;display:flex;height:16px;justify-content:center;width:16px}.tool-dropdown-item .tool-shortcut{color:#666;color:var(--text-secondary);font-size:12px;margin-left:auto}.zoom-controls{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffd9;border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px;color:#333;color:var(--text-primary);display:flex;gap:6px;padding:6px;position:absolute;right:16px;top:90px;z-index:10}[data-theme=dark] .zoom-controls{background:#202020d9}.zoom-btn{cursor:pointer;font-weight:600;padding:6px 10px}.zoom-btn,.zoom-select{background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:6px;color:#333;color:var(--text-primary)}.zoom-select{padding:6px 8px}.canvas-toolbar{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid #ffffff1a;box-shadow:0 4px 20px #00000026;box-sizing:border-box;display:flex;gap:16px;height:64px;left:0;padding:0 24px;position:fixed;right:0;top:0;width:100vw;z-index:1000}.canvas-toolbar,.canvas-toolbar.has-side-indicator{justify-content:space-between}.toolbar-left{flex:1 1;gap:24px}.brand-section,.toolbar-left{align-items:center;display:flex}.brand-section{gap:12px}.app-name{color:#fff;font-weight:600;letter-spacing:-.5px}.project-section{align-items:center;display:flex;gap:12px}.project-name-input{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;border-radius:8px;color:#fff;font-size:14px;font-weight:500;min-width:240px;padding:8px 16px}.project-name-input::placeholder{color:#ffffffb3}.project-name-input:focus{background:#ffffff40;border-color:#fff6;box-shadow:0 0 0 3px #ffffff1a;outline:none}.project-status{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:16px;color:#ffffffe6;display:flex;font-size:12px;font-weight:500;gap:8px;padding:6px 12px}.status-indicator{animation:pulse 2s infinite;background:#4caf50;border-radius:50%;box-shadow:0 0 6px #4caf5080;height:8px;width:8px}.status-indicator.unsaved{animation:pulse-warning 1.5s infinite;background:#ff9800;box-shadow:0 0 6px #ff980080}.status-indicator.saving{animation:spin 1s linear infinite;background:#2196f3;box-shadow:0 0 6px #2196f380}@keyframes pulse-warning{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.toolbar-center{justify-content:center}.toolbar-center,.toolbar-right{align-items:center;display:flex;flex:1 1;gap:16px}.toolbar-right{justify-content:flex-end}.canvas-toolbar.has-side-indicator .toolbar-center{flex:0 1;justify-content:center}.canvas-toolbar.has-side-indicator .toolbar-right{flex:1 1}.action-group{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;display:flex;gap:6px;padding:0 8px}.toolbar-separator{background:#fff3;height:32px;margin:0 4px;width:1px}.button-group{align-items:center;display:flex;gap:4px}.button-group.primary{background:#4caf501a;border:1px solid #4caf5033;border-radius:8px;padding:4px 8px}.button-group.secondary{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;padding:4px 8px}.canvas-actions{display:flex;gap:8px}.canvas-button{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:6px;min-height:32px;padding:8px 12px;transition:all .2s ease;white-space:nowrap}.canvas-button.primary{background:linear-gradient(135deg,#4caf50,#45a049);border:none;box-shadow:0 2px 8px #4caf504d;font-weight:600;padding:8px 16px}.canvas-button.primary:hover{background:linear-gradient(135deg,#45a049,#3d8b40);box-shadow:0 4px 12px #4caf5066;transform:translateY(-1px)}.canvas-button.secondary{font-size:12px;padding:6px 10px}.canvas-button.tertiary{background:#ffffff14;border-color:#ffffff1a;font-size:11px;min-height:28px;padding:6px 8px}.canvas-button:hover{background:#ffffff40;border-color:#ffffff4d;box-shadow:0 4px 12px #00000026;transform:translateY(-1px)}.canvas-button:disabled{background:#ffffff1a;cursor:not-allowed;opacity:.5;transform:none}.canvas-button.secondary{background:#ffffff1a;border-color:#ffffff26}.canvas-button.secondary:hover{background:#fff3;border-color:#ffffff40}.canvas-button.active{background:#4caf50cc;border-color:#4caf50;box-shadow:0 0 0 2px #4caf504d}.btn-primary{background:linear-gradient(135deg,#4caf50,#45a049);border:none;box-shadow:0 4px 12px #4caf504d;font-weight:600}.btn-primary:hover{background:linear-gradient(135deg,#45a049,#3d8b40);box-shadow:0 6px 16px #4caf5066}.btn-icon{justify-content:center;min-width:36px;padding:8px}.current-side-indicator{background:#ffffff26;border-radius:20px;color:#fff;font-size:13px;font-weight:500;gap:8px;padding:6px 12px}.side-indicator-dot{background:#4caf50;height:8px;width:8px}.canvas-toggle{align-items:center;color:#fff;cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:8px}.canvas-toggle input[type=checkbox]{accent-color:#4caf50;height:16px;width:16px}.canvas-wrapper{align-items:center;background:#f8f9fa;background:var(--secondary-bg);display:flex;flex:1 1;justify-content:center;min-height:0;min-width:0;overflow:auto;padding:2rem}.canvas-container{background:#fff;background:var(--primary-bg);border:2px solid #e0e0e0;border:2px solid var(--border-color);border-radius:8px;box-shadow:0 4px 12px #00000026;image-rendering:crisp-edges;image-rendering:pixelated;min-height:0;min-width:0;overflow:visible;position:relative;transform-origin:top left;transition:transform .1s ease}.ruler{background:#f8f9fa;background:var(--secondary-bg);position:absolute;z-index:5}.ruler.ruler-h{height:20px;left:0;right:0;top:0}.ruler.ruler-v{bottom:0;left:0;top:60px;width:20px}.ruler-corner{background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);border-right:1px solid #e0e0e0;border-right:1px solid var(--border-color);height:20px;left:0;position:absolute;top:60px;width:20px;z-index:6}#canvas{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:6px;cursor:crosshair;display:block;image-rendering:crisp-edges;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;transform:translateZ(0)}.right-panels{display:flex;transform:translateX(0);transition:all .3s ease}.right-panels.collapsed{overflow:hidden;transform:translateX(100%);width:0}.layers-panel{background:#fff;background:var(--panel-bg);border-left:1px solid #e0e0e0;border-left:1px solid var(--border-color);display:flex;flex-direction:column;overflow-y:auto;width:250px}.layers-header{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:1rem}.layers-title-section{display:flex;flex-direction:column;gap:.25rem}.layers-title{color:#333;color:var(--text-primary);font-size:1.1rem;font-weight:600;margin:0}.elements-count{color:#666;color:var(--text-secondary);font-size:.8rem;font-weight:400}.layers-controls{display:flex;gap:.25rem}.layer-control-btn{background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);transition:all .3s ease}.layer-control-btn:hover{background:#667eea;background:var(--accent-color);color:#fff}.layer-control-btn:disabled{opacity:.5}.layers-list{flex:1 1;padding:.5rem}.layers-empty{color:#666;color:var(--text-secondary);font-size:.9rem;padding:2rem 1rem;text-align:center}.layer-item{border-radius:6px;gap:.75rem;transition:all .3s ease}.layer-item.selected,.layer-item:hover{background:#667eea;background:var(--accent-color);color:#fff}.layer-icon{align-items:center;background:#fff;background:var(--primary-bg);border-radius:4px;display:flex;flex-shrink:0;font-size:.8rem;height:24px;justify-content:center;width:24px}.layers-search{background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);padding:.75rem;position:relative}.search-icon{left:1.5rem;pointer-events:none}.search-input{border:1px solid #e0e0e0;border:1px solid var(--border-color);font-size:.85rem;padding:.5rem .5rem .5rem 2rem;transition:all .2s ease}.search-input:focus{box-shadow:0 0 0 2px #667eea1a}.search-input::placeholder{color:#666;color:var(--text-secondary)}.layer-item{align-items:center;border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;gap:.5rem;margin-bottom:.5rem;padding:.75rem;position:relative;transition:all .2s ease;-webkit-user-select:none;user-select:none}.layer-item,.layer-item:hover{background:#f8f9fa;background:var(--secondary-bg)}.layer-item:hover{border-color:#e0e0e0;border-color:var(--border-color);box-shadow:0 2px 8px #0000000f;color:#333;color:var(--text-primary);transform:translateY(-1px)}.layer-item.selected{background:#eef2ff}.layer-item.main-selected,.layer-item.selected{border-color:#667eea;border-color:var(--accent-color);color:#333;color:var(--text-primary)}.layer-item.main-selected{background:#e0e7ff;box-shadow:0 0 0 2px #667eea40}.layer-item.drag-over{background:#667eea0d;border-color:#667eea;border-color:var(--accent-color)}.layer-drag-handle{align-items:center;color:#666;color:var(--text-secondary);cursor:grab;display:flex;height:16px;justify-content:center;transition:color .2s ease;width:16px}.layer-drag-handle:active{cursor:grabbing}.layer-item:hover .layer-drag-handle{color:#666;color:var(--text-secondary)}.layer-thumbnail{align-items:center;background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:4px;display:flex;flex-shrink:0;height:32px;justify-content:center;overflow:hidden;width:32px}.thumbnail-image{height:100%;object-fit:cover;width:100%}.thumbnail-placeholder{align-items:center;background:#fff;background:var(--primary-bg);display:flex;height:100%;justify-content:center;width:100%}.layer-item:hover .layer-type-icon,.layer-type-icon,.thumbnail-placeholder{color:#666;color:var(--text-secondary)}.layer-info{flex:1 1;min-width:0}.layer-name{font-size:.9rem;font-weight:500;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-details{font-size:.7rem;margin-bottom:.5rem;opacity:.7}.layer-opacity{align-items:center;display:flex;gap:.5rem;margin-top:.25rem;overflow:hidden;padding-right:8px}.opacity-slider{-webkit-appearance:none;background:#e0e0e0;background:var(--border-color);border-radius:2px;cursor:pointer;flex:1 1;height:4px;outline:none}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#667eea;background:var(--accent-color);border-radius:50%;cursor:pointer;height:12px;width:12px}.opacity-slider::-moz-range-thumb{background:#667eea;background:var(--accent-color);border:none;border-radius:50%;cursor:pointer;height:12px;width:12px}.opacity-value{display:inline-block;flex-shrink:0;font-size:.7rem;min-width:36px}.layer-controls{display:flex;gap:.25rem;opacity:.7;transition:opacity .2s ease}.layer-item:hover .layer-controls{opacity:1}.layer-control-btn{align-items:center;background:#0000;border:1px solid #0000;border-radius:4px;cursor:pointer;display:flex;justify-content:center;padding:.25rem;transition:all .2s ease}.layer-control-btn:hover{background:#ffffff1a;border-color:#fff3}.layer-control-btn:disabled{cursor:not-allowed;opacity:.3}.context-menu{background:var(--panel-bg);box-shadow:0 4px 20px #00000026;min-width:160px;padding:.5rem 0;z-index:1000}.context-menu-item{align-items:center;color:#333;color:var(--text-primary);cursor:pointer;display:flex;font-size:.9rem;gap:.75rem;padding:.5rem 1rem;transition:background-color .2s ease}.context-menu-item:hover{background:#667eea;background:var(--accent-color);color:#fff}.context-menu-item:first-child{border-radius:8px 8px 0 0}.context-menu-item:last-child{border-radius:0 0 8px 8px}.templates-modal-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.templates-modal{background:#fff;background:var(--panel-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;height:80vh;max-height:800px;max-width:1200px;overflow:hidden;width:90vw}.templates-modal-header{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);display:flex;flex-shrink:0;justify-content:space-between;padding:1.5rem}.templates-modal-title h2{color:#333;color:var(--text-primary);font-size:1.5rem;font-weight:600;margin:0}.templates-modal-title p{color:#666;color:var(--text-secondary);font-size:.9rem;margin:.25rem 0 0}.templates-modal-actions,.templates-modal-btn{display:flex;gap:.5rem}.templates-modal-btn{align-items:center;background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:6px;color:#333;color:var(--text-primary);cursor:pointer;padding:.5rem 1rem;transition:all .2s ease}.templates-modal-btn:hover{background:#667eea;background:var(--accent-color);border-color:#667eea;border-color:var(--accent-color);color:#fff}.templates-modal-btn.close{background:#0000;border:none;padding:.5rem}.templates-modal-filters{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);display:flex;flex-shrink:0;gap:1rem;padding:1rem 1.5rem}.templates-search{flex:1 1;max-width:300px;position:relative}.templates-search input{background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:6px;color:#333;color:var(--text-primary);font-size:.9rem;padding:.5rem .5rem .5rem 2rem;width:100%}.templates-search svg{color:#666;color:var(--text-secondary);left:.5rem;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.templates-categories{display:flex;flex-wrap:wrap;gap:.5rem}.category-btn{align-items:center;background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:20px;color:#333;color:var(--text-primary);cursor:pointer;display:flex;font-size:.85rem;gap:.5rem;padding:.5rem 1rem;transition:all .2s ease}.category-btn.active,.category-btn:hover{background:#667eea;background:var(--accent-color);border-color:#667eea;border-color:var(--accent-color);color:#fff}.category-count{background:#fff3;border-radius:10px;font-size:.75rem;padding:.125rem .375rem}.templates-view-controls{display:flex;gap:.25rem}.view-btn{background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:6px;color:#333;color:var(--text-primary);cursor:pointer;padding:.5rem;transition:all .2s ease}.view-btn.active,.view-btn:hover{background:#667eea;background:var(--accent-color);border-color:#667eea;border-color:var(--accent-color);color:#fff}.templates-modal-content{flex:1 1;overflow-y:auto;padding:1.5rem}.templates-empty,.templates-loading{align-items:center;color:#666;color:var(--text-secondary);display:flex;flex-direction:column;justify-content:center;padding:3rem}.templates-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.templates-list{display:flex;flex-direction:column;gap:1rem}.templates-list .template-card{display:flex;flex-direction:row;height:120px}.templates-list .template-preview{flex-shrink:0;height:100%;width:200px}.templates-list .template-info{display:flex;flex:1 1;flex-direction:column;justify-content:space-between;padding:1rem}.templates-list .template-actions{justify-content:flex-end;margin-top:0}.template-card{background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;overflow:hidden;transition:all .2s ease}.template-card:hover{border-color:#667eea;border-color:var(--accent-color);box-shadow:0 8px 25px #00000026;transform:translateY(-2px)}.template-preview{background:#fff;background:var(--primary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);height:160px;overflow:hidden;position:relative}.template-preview img{background:#fff;display:block;height:100%;object-fit:cover;object-position:center;width:100%}.template-preview-placeholder{align-items:center;background:#fff;background:var(--primary-bg);color:#666;color:var(--text-secondary);display:flex;font-size:.9rem;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.template-preview-content{border-radius:4px;height:100%;position:relative;width:100%}.preview-element{background:#667eea;background:var(--accent-color);border-radius:2px;opacity:.7;position:absolute}.template-overlay{align-items:center;background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease}.template-card:hover .template-overlay{opacity:1}.template-action-btn{background:#fff3;border:1px solid #ffffff4d;border-radius:6px;color:#fff;cursor:pointer;margin:0 .25rem;padding:.5rem;transition:all .2s ease}.template-action-btn:hover{background:#ffffff4d;border-color:#ffffff80}.template-info{padding:1rem}.template-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.template-name{color:#333;color:var(--text-primary);font-weight:600;margin:0}.template-category{background:#667eea;background:var(--accent-color);border-radius:12px;color:#fff;font-size:.75rem;padding:.25rem .5rem}.template-description{font-size:.85rem;margin:.5rem 0}.template-description,.template-meta{color:#666;color:var(--text-secondary)}.template-meta{display:flex;font-size:.75rem;justify-content:space-between;margin-top:.5rem}.template-actions{flex-wrap:wrap;gap:.5rem;margin-top:1rem}.template-actions,.template-btn{display:flex;justify-content:center}.template-btn{align-items:center;background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px;color:#333;color:var(--text-primary);cursor:pointer;flex-shrink:0;height:32px;padding:0;transition:all .2s ease;width:32px}.template-btn svg{height:16px;width:16px}.template-btn.primary,.template-btn:hover{background:#667eea;background:var(--accent-color);border-color:#667eea;border-color:var(--accent-color);color:#fff}.template-btn.primary:hover{background:#5a67d8;border-color:#5a67d8}.template-preview-modal{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:3000}.template-preview-content{background:#fff;background:var(--panel-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;height:80vh;max-height:600px;max-width:800px;overflow:hidden;width:90vw}.template-preview-header{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:1.5rem}.template-preview-header h3{color:#333;color:var(--text-primary);font-size:1.25rem;font-weight:600;margin:0}.template-preview-header button{background:#0000;border:none;border-radius:6px;color:#333;color:var(--text-primary);cursor:pointer;padding:.5rem;transition:background-color .2s ease}.template-preview-header button:hover{background:#fff;background:var(--primary-bg)}.template-preview-body{display:flex;flex:1 1;overflow:hidden}.template-preview-canvas{background:#fff;background:var(--primary-bg);flex:1 1;overflow:auto;position:relative}.preview-element-full,.template-preview-canvas{align-items:center;display:flex;justify-content:center}.preview-element-full{background:#667eea;background:var(--accent-color);border-radius:4px;color:#fff;font-size:.8rem;opacity:.8;position:absolute}.template-preview-info{background:#f8f9fa;background:var(--secondary-bg);border-left:1px solid #e0e0e0;border-left:1px solid var(--border-color);overflow-y:auto;padding:1.5rem;width:300px}.template-preview-info h4{color:#333;color:var(--text-primary);font-size:1.1rem;font-weight:600;margin:0 0 1rem}.template-preview-info p{color:#666;color:var(--text-secondary);font-size:.9rem;margin:.5rem 0}.template-preview-actions{background:#f8f9fa;background:var(--secondary-bg);border-top:1px solid #e0e0e0;border-top:1px solid var(--border-color);display:flex;gap:1rem;justify-content:flex-end;padding:1.5rem}.properties-panel{background:#fff;background:var(--panel-bg);border-left:1px solid #e0e0e0;border-left:1px solid var(--border-color);display:flex;flex-direction:column;overflow-y:auto;width:320px}.properties-header{background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);padding:1rem}.properties-title{align-items:center;color:#333;color:var(--text-primary);display:flex;font-size:1.1rem;font-weight:600;gap:.5rem}.property-title-icon{font-size:1.2rem}.properties-content{padding:1rem}.properties-empty{padding:2rem 1rem;text-align:center}.empty-icon{font-size:3rem}.properties-empty h4{color:#333;color:var(--text-primary);font-size:1.1rem;margin-bottom:.5rem}.properties-empty p{color:#666;color:var(--text-secondary);margin-bottom:1.5rem}.quick-tips{background:#f8f9fa;background:var(--secondary-bg);border-radius:6px;font-size:.8rem;padding:1rem;text-align:left}.quick-tips h5{color:#333;color:var(--text-primary);margin-bottom:.5rem}.quick-tips ul{list-style:none;padding:0}.quick-tips li{color:#666;color:var(--text-secondary);margin-bottom:.25rem}.property-group{border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px;margin-bottom:1.5rem;overflow:hidden}.property-group-title{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);color:#333;color:var(--text-primary);display:flex;font-size:.9rem;font-weight:600;gap:.5rem;padding:.75rem 1rem}.property-grid{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:1fr 1fr;padding:1rem}.property-item{padding:.75rem 1rem}.property-label{align-items:center;color:#666;color:var(--text-secondary);display:block;display:flex;font-size:.8rem;font-weight:500;gap:.25rem;margin-bottom:.5rem}.property-input,.property-select,.property-textarea{background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:4px;color:#333;color:var(--text-primary);font-size:.9rem;padding:.5rem;transition:all .3s ease;width:100%}.property-input:focus,.property-select:focus,.property-textarea:focus{border-color:#667eea;border-color:var(--accent-color);box-shadow:0 0 0 2px #667eea33;outline:none}.property-input-small{width:60px}.property-slider{margin:.5rem 0;width:100%}.slider-container{align-items:center;display:flex;gap:.5rem}.opacity-value{color:#666;color:var(--text-secondary);font-size:.8rem;min-width:40px;text-align:right}.color-preview{border:2px solid #e0e0e0;border:2px solid var(--border-color);border-radius:6px;cursor:pointer;height:30px;margin-top:.25rem;transition:all .3s ease;width:40px}.color-preview:hover{border-color:#667eea;border-color:var(--accent-color);transform:scale(1.05)}.color-row{align-items:center;display:flex;gap:.5rem;margin-top:.25rem}.transparent-btn{background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;font-size:.8rem;padding:.25rem .5rem;transition:all .3s ease}.transparent-btn:hover{background:#667eea;background:var(--accent-color);color:#fff}.alignment-controls,.text-style-controls,.text-wrap-controls{display:flex;gap:.25rem;margin-top:.5rem}.align-btn,.style-btn,.wrap-btn{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;display:flex;font-size:.8rem;justify-content:center;padding:.5rem;transition:all .3s ease}.align-btn.active,.align-btn:hover,.style-btn.active,.style-btn:hover,.wrap-btn.active,.wrap-btn:hover{background:#667eea;background:var(--accent-color);color:#fff}.align-btn.active,.style-btn.active,.wrap-btn.active{border-color:#667eea;border-color:var(--accent-color)}.property-description{color:#666;color:var(--text-secondary);font-size:.75rem;line-height:1.3;margin-top:.25rem}.action-buttons{grid-gap:.5rem;display:grid;gap:.5rem;padding:1rem}.action-btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:flex;font-size:.9rem;justify-content:space-between;padding:.75rem;transition:all .3s ease}.action-btn.primary{background:#667eea;background:var(--accent-color);color:#fff}.action-btn.primary:hover{background:#5a6fd8;background:var(--accent-hover)}.action-btn.danger{background:#e74c3c;background:var(--danger-color);color:#fff}.action-btn.danger:hover{background:#c0392b}.element-info{font-size:.8rem;padding:1rem}.info-item{display:flex;justify-content:space-between;margin-bottom:.25rem}.info-label{color:#666;color:var(--text-secondary)}.info-value{color:#333;color:var(--text-primary);font-family:monospace}.color-picker-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.color-picker-modal{background:#fff;background:var(--primary-bg);border-radius:12px;box-shadow:0 20px 40px #0000004d;padding:1rem}.color-picker-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}.color-picker-btn{border:none;border-radius:6px;cursor:pointer;font-size:.9rem;padding:.5rem 1rem;transition:all .3s ease}.color-picker-btn.primary{background:#667eea;background:var(--accent-color);color:#fff}.color-picker-btn.secondary{background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);color:#333;color:var(--text-primary)}.tutorial-overlay{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.tutorial-modal{background:#fff;background:var(--primary-bg);border-radius:16px;box-shadow:0 25px 50px #00000080;max-height:80vh;max-width:800px;overflow:hidden;width:90%}.tutorial-header{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:1.5rem}.tutorial-title{align-items:center;display:flex;gap:1rem}.tutorial-icon{color:#667eea;color:var(--accent-color)}.tutorial-close{background:none;border:none;color:#666;color:var(--text-secondary);cursor:pointer;transition:color .3s ease}.tutorial-close:hover{color:#333;color:var(--text-primary)}.tutorial-content{max-height:50vh;overflow-y:auto;padding:2rem}.tutorial-content h4{color:#333;color:var(--text-primary);margin-bottom:1rem}.tutorial-content ul{margin-bottom:1.5rem;padding-left:1rem}.tutorial-content li{color:#666;color:var(--text-secondary);margin-bottom:.5rem}.shortcuts-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.shortcut-section h4{color:#667eea;color:var(--accent-color);margin-bottom:.75rem}.tutorial-cta{border-radius:8px;margin-top:1.5rem;text-align:center}.tutorial-cta,.tutorial-footer{background:#f8f9fa;background:var(--secondary-bg);padding:1.5rem}.tutorial-footer{align-items:center;border-top:1px solid #e0e0e0;border-top:1px solid var(--border-color);display:flex;justify-content:space-between}.tutorial-progress{align-items:center;display:flex;gap:1rem}.progress-dots{display:flex;gap:.5rem}.progress-dot{background:#666;background:var(--text-secondary);border-radius:50%;cursor:pointer;height:10px;transition:all .3s ease;width:10px}.progress-dot.active{background:#667eea;background:var(--accent-color);transform:scale(1.2)}.progress-dot.completed{background:#27ae60;background:var(--success-color)}.progress-text{color:#666;color:var(--text-secondary);font-size:.9rem}.tutorial-btn,.tutorial-navigation{display:flex;gap:.5rem}.tutorial-btn{align-items:center;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;padding:.75rem 1.5rem;transition:all .3s ease}.tutorial-btn.primary{background:#667eea;background:var(--accent-color);color:#fff}.tutorial-btn.secondary{background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);color:#333;color:var(--text-primary)}.tutorial-btn:hover{transform:translateY(-2px)}.tutorial-btn:disabled{cursor:not-allowed;opacity:.5}.loading-overlay{align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1000}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #e0e0e0;border-top:4px solid #667eea;border:4px solid var(--border-color);border-radius:50%;border-top-color:var(--accent-color);height:40px;width:40px}.toolbar-loading{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:100}@media (max-width:1200px){.right-panels{width:300px}.properties-panel{width:280px}.layers-panel{width:220px}}@media (max-width:768px){.editor-container{flex-direction:column}.sidebar-toggle{display:none}.left-sidebar{height:200px;transform:none;width:100%}.left-sidebar.collapsed{height:0;transform:none}.toolbar{overflow-x:auto}.right-panels,.toolbar{flex-direction:row;height:200px;width:100%}.right-panels{transform:none}.right-panels.collapsed{height:0;transform:none}.layers-panel,.properties-panel{height:100%;width:50%}.canvas-area{height:calc(100vh - 400px)}.landing-title{font-size:2.5rem}.features-grid{grid-template-columns:1fr}.tutorial-modal{margin:1rem;width:95%}.shortcuts-grid{grid-template-columns:1fr}}*{transition:background-color .3s ease,border-color .3s ease,color .3s ease}.project-browser-container{background:#fff;background:var(--primary-bg);min-height:100vh;overflow:auto;padding:2rem}.project-browser-header{align-items:center;border-bottom:2px solid #e0e0e0;border-bottom:2px solid var(--border-color);display:flex;justify-content:space-between;margin-bottom:2rem;padding-bottom:1rem}.back-button{background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);color:#333;color:var(--text-primary);gap:.5rem;padding:.75rem 1rem;transition:all .3s ease}.back-button:hover{background:#e0e0e0;background:var(--border-color)}.project-browser-title{color:#333;color:var(--text-primary);font-size:2rem;font-weight:700}.new-project-button{align-items:center;background:#667eea;background:var(--accent-color);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-weight:600;gap:.5rem;padding:.75rem 1.5rem;transition:all .3s ease}.new-project-button:hover{background:#5a6fd8;background:var(--accent-hover);transform:translateY(-1px)}.project-browser-search{margin-bottom:2rem}.search-container{max-width:400px;position:relative}.search-icon{color:#666;color:var(--text-secondary);left:1rem;position:absolute;top:50%;transform:translateY(-50%)}.search-input{background:#fff;background:var(--primary-bg);border:2px solid #e0e0e0;border:2px solid var(--border-color);color:#333;color:var(--text-primary);font-size:1rem;padding:.75rem 1rem .75rem 2.5rem}.search-input:focus{border-color:#667eea;border-color:var(--accent-color)}.projects-grid{grid-gap:2rem;align-items:start;display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.project-card{background:#fff;background:var(--primary-bg);border:2px solid #e0e0e0;border:2px solid var(--border-color);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;height:-webkit-fit-content;height:fit-content;min-height:280px;padding:1.5rem;transition:all .3s ease}.project-card:hover{border-color:#667eea;border-color:var(--accent-color);box-shadow:0 8px 25px #667eea26;transform:translateY(-2px)}.project-preview{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border-radius:8px;display:flex;height:140px;justify-content:center;margin-bottom:1rem;overflow:hidden;position:relative}.project-preview.dual-sided{height:180px}.project-preview-svg{align-items:center;display:flex;height:100%;justify-content:center;overflow:hidden;width:100%}.project-preview-svg svg{height:auto;max-height:100%;max-width:100%;object-fit:contain;width:auto}.project-preview-img{display:block;height:100%;object-fit:contain;width:100%}.dual-sided-preview{display:flex;flex-direction:row;gap:.5rem;height:100%;width:100%}.side-preview{align-items:center;background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:4px;display:flex;flex:1 1;justify-content:center;overflow:hidden;position:relative}.side-preview.front-side{border-right:2px solid #667eea;border-right:2px solid var(--accent-color)}.side-preview.back-side{border-left:2px solid #667eea;border-left:2px solid var(--accent-color)}.side-label{font-size:.7rem;font-weight:500;margin-top:.25rem}.project-preview-content,.side-label{color:#666;color:var(--text-secondary)}.project-preview-content{text-align:center}.project-elements-count{display:block;font-size:.9rem;margin-top:.5rem}.project-info{flex:1 1;margin-bottom:1rem}.project-name{word-wrap:break-word;align-items:center;color:#333;color:var(--text-primary);display:flex;flex-wrap:wrap;font-size:1.1rem;font-weight:600;gap:.5rem;margin-bottom:.5rem;overflow-wrap:break-word}.dual-sided-badge{background:#667eea;background:var(--accent-color);border-radius:12px;color:#fff;font-size:.7rem;font-weight:500;letter-spacing:.5px;padding:.25rem .5rem;text-transform:uppercase}.project-meta{color:#666;color:var(--text-secondary);flex-wrap:wrap;font-size:.8rem;gap:.5rem;justify-content:space-between}.project-date,.project-meta{align-items:center;display:flex}.project-date{gap:.25rem}.project-size{background:#f8f9fa;background:var(--secondary-bg);border-radius:4px;font-size:.75rem;padding:.25rem .5rem}.project-actions{border-top:1px solid #e0e0e0;border-top:1px solid var(--border-color);display:flex;gap:.5rem;margin-top:auto;padding-top:1rem}.project-action-btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:flex;flex:1 1;font-weight:500;gap:.5rem;justify-content:center;padding:.5rem 1rem;transition:all .3s ease}.project-action-btn.primary{background:#667eea;background:var(--accent-color);color:#fff}.project-action-btn.primary:hover{background:#5a6fd8;background:var(--accent-hover)}.project-action-btn.secondary{background:#6b7280;color:#fff}.project-action-btn.secondary:hover{background:#4b5563}.project-action-btn.danger{background:#e74c3c;background:var(--danger-color);color:#fff;flex:0 0 auto;padding:.5rem}.project-action-btn.danger:hover{background:#c0392b}@media (max-width:768px){.projects-grid{gap:1rem;grid-template-columns:1fr}.project-card{min-height:250px;padding:1rem}.project-preview{height:120px}.project-preview.dual-sided{height:160px}.dual-sided-preview{gap:.25rem}.side-preview{border-radius:2px}.side-preview.front-side{border-bottom:none;border-right:1px solid #667eea;border-right:1px solid var(--accent-color)}.side-preview.back-side{border-left:1px solid #667eea;border-left:1px solid var(--accent-color);border-top:none}.project-meta{align-items:flex-start;gap:.25rem}.project-actions,.project-meta{flex-direction:column}.project-action-btn{justify-content:center}}.empty-state{color:#666;color:var(--text-secondary);grid-column:1/-1;padding:4rem 2rem;text-align:center}.empty-icon{margin-bottom:1rem;opacity:.5}.empty-state h3{color:#333;color:var(--text-primary);font-size:1.5rem;margin-bottom:.5rem}.empty-state p{margin-bottom:2rem}.landing-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.cta-button.primary{background:linear-gradient(45deg,#ff6b6b,#ee5a24)}.cta-button.secondary{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:2px solid #ffffff4d}.cta-button.secondary:hover{background:#ffffff4d;border-color:#ffffff80}.toolbar-action-btn{align-items:center;background:#667eea;background:var(--accent-color);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:.9rem;font-weight:500;gap:.5rem;padding:.5rem 1rem;transition:all .3s ease}.toolbar-action-btn:hover{background:#5a6fd8;background:var(--accent-hover);transform:translateY(-1px)}.toast-stack{grid-gap:10px;bottom:24px;display:grid;gap:10px;position:fixed;right:24px;z-index:3000}.toast{align-items:center;border-radius:999px;box-shadow:0 8px 20px #0003;color:#fff;cursor:pointer;display:inline-flex;font-weight:600;gap:10px;padding:10px 14px;transition:transform .2s ease,opacity .2s ease;-webkit-user-select:none;user-select:none}.toast:hover{transform:translateY(-2px)}.toast .toast-icon{display:inline-flex}.toast.info{background:#64748b}.toast.success{background:#22c55e}.toast.warning{background:#f59e0b}.toast.danger{background:#ef4444}.modal-overlay{background:#00000059;inset:0;z-index:2000}.modal{background:#fff;background:var(--primary-bg);border:2px solid #e0e0e0;border:2px solid var(--border-color);border-radius:12px;box-shadow:0 12px 40px #00000040;display:flex;flex-direction:column;max-height:90vh;max-width:95vw;overflow:hidden;width:760px}.modal-header{border-bottom:2px solid #e0e0e0;border-bottom:2px solid var(--border-color);padding:16px 20px}.modal-actions{align-items:center;border-top:2px solid #e0e0e0;border-top:2px solid var(--border-color);flex:0 0 auto;padding:16px 20px}.modal-close{background:#0000;color:#333;color:var(--text-primary);font-size:20px}.tab-button{background:#f3f4f6;border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px 8px 0 0;color:#374151;cursor:pointer;padding:8px 12px}.tab-button.active{background:#fff;border-bottom-color:#0000;color:#374151}[data-theme=light] .tab-button{background:#f3f4f6;border-color:#d1d5db;color:#374151}[data-theme=light] .tab-button.active{background:#fff;border-bottom-color:#0000;color:#374151}.tab-content{border-top:1px solid #e0e0e0;border-top:1px solid var(--border-color);padding:16px}.context-menu{grid-gap:4px;background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px;box-shadow:0 8px 20px #0003;display:grid;gap:4px;padding:6px;position:fixed;z-index:1500}.context-menu,.context-menu button{color:#333;color:var(--text-primary)}.context-menu button{background:#0000;border:none;border-radius:6px;cursor:pointer;padding:6px 10px;text-align:left}.context-menu button:hover{background:#f8f9fa;background:var(--secondary-bg)}.form-row{grid-gap:8px;align-items:center;gap:8px;grid-template-columns:120px 80px 40px;margin:6px 0}.form-label{font-weight:600}.form-input,.form-label{color:#333;color:var(--text-primary)}.form-input{background:#fff;background:var(--primary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:4px;font-size:13px;padding:6px 8px}.form-suffix{color:#666;color:var(--text-secondary)}.modal-actions{border-top:1px solid #e0e0e0;border-top:1px solid var(--border-color);display:flex;gap:12px;justify-content:flex-end;padding:12px 16px 16px}.btn{background:#f8f9fa;background:var(--secondary-bg);border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px;color:#333;color:var(--text-primary)}.btn.primary{background:#667eea;background:var(--accent-color);border-color:#667eea;border-color:var(--accent-color);color:#fff}.side-switcher{display:flex;gap:.5rem;margin-bottom:1rem}.side-btn{background:#fff;background:var(--primary-bg);border:2px solid #e0e0e0;border:2px solid var(--border-color);border-radius:8px;color:#333;color:var(--text-primary);cursor:pointer;flex:1 1;font-weight:500;padding:.75rem 1rem;transition:all .3s ease}.side-btn:hover{background:#f8f9fa;background:var(--secondary-bg)}.side-btn.active,.side-btn:hover{border-color:#667eea;border-color:var(--accent-color)}.side-btn.active{background:#667eea;background:var(--accent-color);color:#fff}.dual-sided-toggle{margin-bottom:1rem}.toggle-label{align-items:center;cursor:pointer;display:flex;gap:.75rem;-webkit-user-select:none;user-select:none}.toggle-input{display:none}.toggle-slider{background:#e0e0e0;background:var(--border-color);border-radius:12px;height:24px;position:relative;transition:all .3s ease;width:48px}.toggle-slider:before{background:#fff;border-radius:50%;box-shadow:0 2px 4px #0003;content:"";height:20px;left:2px;position:absolute;top:2px;transition:all .3s ease;width:20px}.toggle-input:checked+.toggle-slider{background:#667eea;background:var(--accent-color)}.toggle-input:checked+.toggle-slider:before{transform:translateX(24px)}.toggle-text{color:#333;color:var(--text-primary);font-weight:500}.current-side-indicator{align-items:center;background:#f8f9fa;background:var(--secondary-bg);border-radius:6px;display:flex;gap:.5rem;margin-bottom:1rem;padding:.5rem 1rem}.side-indicator-dot{background:#667eea;background:var(--accent-color);border-radius:50%;height:12px;width:12px}.side-indicator-text{color:#333;color:var(--text-primary);font-weight:500}[data-theme=dark] .floating-bottom-toolbar{background:#2d2d2df2;border:1px solid #ffffff1a;box-shadow:0 8px 32px #0006}[data-theme=dark] .floating-bottom-toolbar .tool-button{color:#ffffffd9}[data-theme=dark] .floating-bottom-toolbar .tool-button:hover{background:#ffffff14;color:#fff}[data-theme=dark] .tool-dropdown{background:#2d2d2dfa;border:1px solid #ffffff1a;box-shadow:0 8px 32px #0009}[data-theme=dark] .tool-dropdown-item{color:#ffffffe6}[data-theme=dark] .tool-dropdown-item:hover{background:#ffffff14}[data-theme=dark] .tool-dropdown-item .tool-shortcut{color:#fff9}.img-gallery-overlay{align-items:center;background:#0006;display:flex;inset:0;justify-content:center;position:fixed;z-index:9998}.img-gallery{background:#111;border-radius:10px;box-shadow:0 10px 30px #00000080;color:#eee;display:flex;flex-direction:column;height:min(80vh,900px);overflow:hidden;width:min(1000px,96vw)}.img-gallery .header{align-items:center;border-bottom:1px solid #ffffff14;display:flex;padding:12px 14px}.img-gallery .header .title{font-weight:600}.img-gallery .header .spacer{flex:1 1}.img-gallery .icon-btn{align-items:center;background:#0000;border:1px solid #ffffff1f;border-radius:6px;color:#ddd;display:inline-flex;gap:6px;padding:6px 8px}.img-gallery .icon-btn.active{background:#ffffff14}.img-gallery .toolbar{align-items:center;border-bottom:1px solid #ffffff14;display:flex;gap:10px;padding:10px 14px}.img-gallery .toolbar .search{align-items:center;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:8px;display:flex;flex:1 1;gap:8px;padding:6px 8px}.img-gallery .toolbar .search input{background:#0000;border:none;color:#fff;flex:1 1;outline:none}.img-gallery .toolbar .sort select{background:#ffffff0f;border:1px solid #ffffff1f;border-radius:8px;color:#fff;padding:6px 8px}.img-gallery .content{flex:1 1;overflow:auto;padding:12px;position:relative}.img-gallery .content.grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.img-gallery .content.list{grid-gap:8px;display:grid;gap:8px;grid-template-columns:1fr}.img-item{background:#ffffff0a;border:1px solid #ffffff1a;border-radius:8px;display:flex;flex-direction:column;overflow:hidden}.img-item.list{align-items:center;flex-direction:row}.img-item .thumb{align-items:center;aspect-ratio:4/3;background:#ffffff0f;cursor:pointer;display:flex;justify-content:center}.img-item .thumb img{height:100%;object-fit:cover;width:100%}.img-item .thumb-fallback{color:#aaa}.img-item .meta{display:flex;flex-direction:column;gap:2px;padding:8px 10px}.img-item.list .meta{flex:1 1}.img-item .meta .name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.img-item .meta .sub{color:#aaa;font-size:12px}.img-item .actions{display:flex;gap:8px;padding:8px 10px}.btn.small{align-items:center;background:#ffffff0f;border:1px solid #fff3;border-radius:6px;color:#eee;display:inline-flex;font-size:12px;gap:6px;padding:4px 8px}.btn.small.danger{border-color:#f006;color:#ff9c9c}.empty,.loading{color:#aaa;padding:16px;text-align:center}.sentinel{height:1px}.page-setup-modal-overlay{align-items:center;background:#00000059;display:flex;inset:0;justify-content:center;position:fixed;z-index:2000}.page-setup-modal{background:var(--primary-bg);border:2px solid var(--border-color);border-radius:12px;box-shadow:0 12px 40px #00000040;display:flex;flex-direction:column;max-height:90vh;max-width:95vw;overflow:hidden;width:760px}.page-setup-modal-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:2px solid var(--border-color);color:#fff;display:flex;justify-content:space-between;padding:16px 20px}.page-setup-modal-header h3{color:#fff;font-size:18px;font-weight:600;margin:0}.page-setup-modal-close{background:#0000;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:20px;padding:4px;transition:background-color .2s ease}.page-setup-modal-close:hover{background:#ffffff1a}.page-setup-tabs{border-bottom:2px solid var(--border-color);display:flex;flex:0 0 auto}.page-setup-tab-button{background:#0000;border:none;border-bottom:2px solid #0000;color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:500;padding:12px 20px;transition:all .2s ease}.page-setup-tab-button:hover{background:var(--hover-bg);color:var(--text-primary)}.page-setup-tab-button.active{border-bottom-color:var(--accent-color);color:var(--text-primary)}.page-setup-content{display:flex!important;flex:1 1 auto;flex-direction:row!important;overflow:hidden}.page-setup-form{border-right:2px solid var(--border-color);flex:1 1 auto;overflow:auto;padding:16px}.page-setup-form-row{grid-gap:8px;align-items:center;display:grid;gap:8px;grid-template-columns:120px 80px 40px;margin:6px 0}.page-setup-form-label{color:var(--text-primary);font-size:13px;font-weight:600}.page-setup-form-input{background:var(--primary-bg);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:13px;padding:6px 8px;transition:border-color .2s ease;width:100%}.page-setup-form-input:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px #3b82f633;outline:none}.page-setup-form-suffix{color:var(--text-secondary);font-size:12px;text-align:center}.page-setup-preview-panel{background:var(--secondary-bg);flex:0 0 350px;max-height:500px;min-width:350px;overflow:auto;padding:16px}.page-setup-preview-title{color:var(--text-primary);font-size:16px;font-weight:600;margin-bottom:12px}.page-setup-preview-info{background-color:#f8f9fa;border-radius:4px;color:#666;font-size:12px;line-height:1.4;margin-bottom:12px;padding:8px}.page-setup-preview-box{align-items:center;background:var(--primary-bg);border:1px dashed var(--border-color);border-radius:8px;display:flex;height:220px;justify-content:center;margin-bottom:12px;width:100%}.page-setup-preview-meta{grid-gap:2px;color:var(--text-secondary);display:grid;font-size:.9rem;gap:2px;margin-top:8px}.page-setup-modal-actions{align-items:center;border-top:2px solid var(--border-color);display:flex;flex:0 0 auto;gap:12px;justify-content:flex-end;padding:16px 20px}.page-setup-modal-btn{border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;padding:8px 16px;transition:all .2s ease}.page-setup-modal-btn.cancel{background:var(--secondary-bg);color:var(--text-primary)}.page-setup-modal-btn.cancel:hover{background:var(--hover-bg)}.page-setup-modal-btn.primary{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.page-setup-modal-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}@media (prefers-color-scheme:dark){.page-setup-preview-info{background-color:#374151;color:#d1d5db}.page-setup-form-input:focus{box-shadow:0 0 0 2px #3b82f64d}}@media (max-width:768px){.page-setup-modal{height:95vh;width:95vw}.page-setup-content{flex-direction:column!important}.page-setup-form{border-bottom:2px solid var(--border-color);border-right:none}.page-setup-preview-panel{flex:0 0 auto;max-height:300px;min-width:0;min-width:auto}.page-setup-form-row{gap:6px;grid-template-columns:100px 70px 35px}}.data-wizard-overlay{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000c;display:flex;inset:0;justify-content:center;position:fixed;z-index:10000}.data-wizard-modal{animation:wizardSlideIn .3s ease-out;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;max-height:90vh;max-width:1080px;overflow:hidden;width:95vw}.data-wizard-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;justify-content:space-between;padding:24px 32px}.progress-step.active .step-circle{background:#667eea;box-shadow:0 4px 12px #667eea4d}.progress-step.active .step-title,.step-header svg{color:#667eea}.step-header code{background:#f7fafc;border-radius:4px;color:#e53e3e;font-family:Monaco,Menlo,monospace;padding:2px 6px}.upload-area{margin:24px 0}.upload-zone{align-items:center;background:#f7fafc;border:2px dashed #cbd5e0;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;padding:48px 24px;position:relative;transition:all .3s ease}.upload-zone:hover{background:#edf2f7;border-color:#667eea;transform:translateY(-2px)}.upload-zone svg{color:#a0aec0;margin-bottom:16px}.upload-zone h4{color:#2d3748;font-size:18px;font-weight:600;margin:0 0 8px}.upload-zone p{color:#718096;font-size:14px;margin:0}.upload-spinner{animation:spin 1s linear infinite;border:2px solid #e2e8f0;border-radius:50%;border-top-color:#667eea;height:20px;position:absolute;right:16px;top:16px;width:20px}.data-preview{border:1px solid #e2e8f0;border-radius:12px;margin-top:24px;overflow:hidden}.preview-header{align-items:center;background:#f7fafc;border-bottom:1px solid #e2e8f0;display:flex;gap:12px;padding:16px 20px}.preview-header h4{color:#2d3748;font-size:16px;font-weight:600;margin:0}.preview-count{background:#edf2f7;border-radius:12px;color:#718096;font-size:12px;margin-left:auto;padding:4px 8px}.preview-table{max-height:300px;overflow:auto}.preview-table table{border-collapse:collapse;width:100%}.preview-table th{background:#f7fafc;border-bottom:1px solid #e2e8f0;color:#4a5568;font-size:12px;font-weight:600;padding:12px 16px;position:-webkit-sticky;position:sticky;text-align:left;top:0}.preview-table td{border-bottom:1px solid #f1f5f9;color:#2d3748;font-size:12px;padding:12px 16px}.preview-more,.preview-table tr:hover{background:#f7fafc}.preview-more{align-items:center;color:#718096;display:flex;font-size:12px;gap:8px;padding:12px 16px}.mapping-section{margin-bottom:32px}.mapping-section h4{align-items:center;color:#2d3748;display:flex;font-size:18px;font-weight:600;gap:8px;margin:0 0 16px}.field-mapping-grid{display:flex;flex-direction:column;gap:16px}.field-mapping-grid.two-columns{grid-gap:16px;display:grid;gap:16px;grid-template-columns:1fr 1fr}.field-mapping-item{align-items:center;background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;display:flex;gap:16px;padding:16px;transition:all .2s ease}.field-mapping-item:hover{background:#edf2f7;border-color:#cbd5e0}.field-label{color:#4a5568;gap:8px;min-width:120px}.field-input{align-items:center;display:flex;gap:12px}.field-input input{border:1px solid #e2e8f0;border-radius:6px;flex:1 1;font-size:14px;padding:8px 12px;transition:all .2s ease}.field-input input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.field-arrow{color:#a0aec0;font-weight:600}.field-token{background:#edf2f7;border-radius:4px;color:#e53e3e;font-family:Monaco,Menlo,monospace;font-size:12px;min-width:100px;padding:4px 8px;text-align:center}.image-mapping-list{display:flex;flex-direction:column;gap:12px}.image-mapping-item{align-items:center;background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;display:flex;gap:12px;padding:12px}.image-token-input{align-items:center;display:flex;flex:1 1;gap:8px}.image-token-input input{border:1px solid #e2e8f0;border-radius:6px;flex:1 1;font-size:14px;padding:8px 12px}.image-column-select{flex:1 1}.image-column-select select{background:#fff;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;padding:8px 12px;width:100%}.remove-button{background:#fed7d7;border:none;border-radius:6px;color:#c53030;cursor:pointer;padding:8px;transition:all .2s ease}.remove-button:hover{background:#feb2b2;transform:scale(1.05)}.add-image-button{align-items:center;background:#e6fffa;border:1px solid #81e6d9;border-radius:8px;color:#234e52;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;padding:12px 16px;transition:all .2s ease}.add-image-button:hover{background:#b2f5ea;transform:translateY(-1px)}.default-image-section{background:#f7fafc;border-radius:8px;margin-top:16px;padding:16px}.default-image-section label{color:#4a5568;display:block;font-weight:500;margin-bottom:8px}.default-image-section select{background:#fff;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;padding:8px 12px;width:100%}.media-tips{background:#fef5e7;border:1px solid #f6e05e;border-radius:8px;display:flex;gap:16px;margin-top:24px;padding:16px}.media-tips svg{color:#d69e2e;flex-shrink:0;margin-top:2px}.media-tips h5{color:#744210;font-size:14px;font-weight:600;margin:0 0 8px}.media-tips ul{color:#744210;font-size:13px;margin:0;padding-left:16px}.media-tips li{margin-bottom:4px}.review-section{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.review-item{background:#f7fafc;border:1px solid #e2e8f0;gap:16px;padding:20px}.review-icon,.review-item{align-items:center;border-radius:12px;display:flex}.review-icon{background:#667eea;color:#fff;height:48px;justify-content:center;width:48px}.review-content h4{color:#2d3748;font-size:16px;font-weight:600;margin:0 0 4px}.review-content p{color:#718096;font-size:14px;margin:0}.completion-actions{text-align:center}.save-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 4px 12px #667eea4d;color:#fff;cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;gap:12px;padding:16px 32px;transition:all .3s ease}.save-button:hover:not(:disabled){box-shadow:0 8px 20px #667eea66;transform:translateY(-2px)}.save-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.button-spinner{animation:spin 1s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:16px;width:16px}.nav-button.primary{background:#667eea;border-color:#667eea}.nav-button.primary:hover:not(:disabled){background:#5a67d8;border-color:#5a67d8}@media (max-width:768px){.data-wizard-modal{max-height:95vh;width:95vw}.data-wizard-header,.wizard-progress{padding:16px 20px}.wizard-progress{flex-direction:column;gap:16px}.progress-step{width:100%}.step-connector{display:none}.wizard-content{padding:20px}.wizard-navigation{flex-direction:column;gap:12px;padding:16px 20px}.nav-button{justify-content:center;width:100%}.field-mapping-item{align-items:stretch;flex-direction:column;gap:12px}.field-label{min-width:auto}.image-mapping-item{flex-direction:column;gap:12px}.review-item{flex-direction:column;text-align:center}.wizard-context{align-items:flex-start;flex-direction:column;margin-left:0;margin-top:8px}}@media (prefers-color-scheme:dark){.data-wizard-modal{background:#2d3748;color:#e2e8f0}.wizard-progress{background:#1a202c;border-color:#4a5568}.step-title{color:#e2e8f0}.step-description{color:#a0aec0}.wizard-content{background:#2d3748}.step-header h3{color:#e2e8f0}.step-header p{color:#a0aec0}.upload-zone{background:#1a202c;border-color:#4a5568}.upload-zone:hover{background:#2d3748;border-color:#667eea}.data-preview{border-color:#4a5568}.preview-header,.preview-table th{background:#1a202c;border-color:#4a5568}.preview-table th{color:#e2e8f0}.preview-table td{border-color:#4a5568;color:#e2e8f0}.preview-table tr:hover{background:#1a202c}.field-mapping-item{background:#1a202c;border-color:#4a5568}.field-mapping-item:hover{background:#2d3748;border-color:#718096}.field-input input{background:#2d3748;border-color:#4a5568;color:#e2e8f0}.field-input input:focus{border-color:#667eea}.field-token{background:#1a202c;color:#feb2b2}.image-mapping-item{background:#1a202c;border-color:#4a5568}.image-column-select select,.image-token-input input{background:#2d3748;border-color:#4a5568;color:#e2e8f0}.default-image-section{background:#1a202c}.default-image-section select{background:#2d3748;border-color:#4a5568;color:#e2e8f0}.review-item{background:#1a202c;border-color:#4a5568}.review-content h4{color:#e2e8f0}.review-content p{color:#a0aec0}.wizard-navigation{background:#1a202c;border-color:#4a5568}.nav-button{background:#2d3748;border-color:#4a5568;color:#e2e8f0}.nav-button:hover:not(:disabled){background:#1a202c;border-color:#718096}}[data-theme=dark] .data-wizard-modal{background:#2d3748;color:#e2e8f0}[data-theme=dark] .wizard-progress{background:#1a202c;border-color:#4a5568}[data-theme=dark] .step-title{color:#e2e8f0}[data-theme=dark] .step-description{color:#a0aec0}[data-theme=dark] .wizard-content{background:#2d3748}[data-theme=dark] .step-header h3{color:#e2e8f0}[data-theme=dark] .step-header p{color:#a0aec0}[data-theme=dark] .upload-zone{background:#1a202c;border-color:#4a5568}[data-theme=dark] .upload-zone:hover{background:#2d3748;border-color:#667eea}[data-theme=dark] .data-preview{border-color:#4a5568}[data-theme=dark] .preview-header,[data-theme=dark] .preview-table th{background:#1a202c;border-color:#4a5568}[data-theme=dark] .preview-table th{color:#e2e8f0}[data-theme=dark] .preview-table td{border-color:#4a5568;color:#e2e8f0}[data-theme=dark] .preview-table tr:hover{background:#1a202c}[data-theme=dark] .field-mapping-item{background:#1a202c;border-color:#4a5568}[data-theme=dark] .field-mapping-item:hover{background:#2d3748;border-color:#718096}[data-theme=dark] .field-input input{background:#2d3748;border-color:#4a5568;color:#e2e8f0}[data-theme=dark] .field-input input:focus{border-color:#667eea}[data-theme=dark] .field-token{background:#1a202c;color:#feb2b2}[data-theme=dark] .image-mapping-item{background:#1a202c;border-color:#4a5568}[data-theme=dark] .image-column-select select,[data-theme=dark] .image-token-input input{background:#2d3748;border-color:#4a5568;color:#e2e8f0}[data-theme=dark] .default-image-section{background:#1a202c}[data-theme=dark] .default-image-section select{background:#2d3748;border-color:#4a5568;color:#e2e8f0}[data-theme=dark] .review-item{background:#1a202c;border-color:#4a5568}[data-theme=dark] .review-content h4{color:#e2e8f0}[data-theme=dark] .review-content p{color:#a0aec0}[data-theme=dark] .wizard-navigation{background:#1a202c;border-color:#4a5568}[data-theme=dark] .nav-button{background:#2d3748;border-color:#4a5568;color:#e2e8f0}[data-theme=dark] .nav-button:hover:not(:disabled){background:#1a202c;border-color:#718096}.super-admin-login-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.super-admin-login-modal{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;max-width:420px;overflow:hidden;width:100%}.login-modal-header{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;margin-bottom:24px;padding:24px 24px 0}.login-title{align-items:center;color:#1f2937;display:flex;gap:12px}.login-title h2{font-size:20px;font-weight:600;margin:0}.login-close{background:none;border:none;border-radius:6px;color:#6b7280;cursor:pointer;padding:8px;transition:all .2s}.login-close:hover{background:#f3f4f6;color:#374151}.login-modal-content{padding:0 24px 24px}.login-form,.two-factor-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{color:#374151;font-size:14px;font-weight:500}.input-group{align-items:center;display:flex;position:relative}.input-group input{background:#fff;border:2px solid #e5e7eb;border-radius:8px;box-sizing:border-box;color:#1f2937;font-size:16px;padding:12px 44px 12px 12px;transition:all .2s;width:100%}.input-group input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;outline:none}.input-group input:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed}.password-toggle{align-items:center;background:none;border:none;border-radius:4px;color:#9ca3af;cursor:pointer;display:flex;justify-content:center;padding:4px;position:absolute;right:12px;transition:all .2s;z-index:2}.password-toggle:hover{background:#f3f4f6;color:#6b7280}.code-input{font-size:18px;font-weight:600;letter-spacing:2px;padding:16px;text-align:center}.login-button,.verify-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:8px;justify-content:center;margin-top:8px;padding:12px 24px;transition:all .2s}.login-button.primary,.verify-button.primary{background:#3b82f6;color:#fff}.login-button.primary:hover:not(:disabled),.verify-button.primary:hover:not(:disabled){background:#2563eb;box-shadow:0 4px 12px #3b82f666;transform:translateY(-1px)}.login-button:disabled,.verify-button:disabled{background:#9ca3af;box-shadow:none;cursor:not-allowed;transform:none}.two-factor-header{margin-bottom:24px;text-align:center}.success-icon{color:#10b981;margin-bottom:12px}.two-factor-header h3{color:#1f2937;font-size:18px;font-weight:600;margin:0 0 8px}.two-factor-header p{color:#6b7280;font-size:14px;margin:0}.two-factor-actions{display:flex;gap:12px;margin-top:8px}.back-button{flex:1 1;font-size:16px;padding:12px 24px}.back-button:hover:not(:disabled){background:#f9fafb;border-color:#d1d5db}.verify-button{flex:2 1}.login-info{align-items:flex-start;background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;color:#0369a1;display:flex;gap:8px;margin-top:20px;padding:12px}.login-info p{font-size:13px;line-height:1.4;margin:0}@media (max-width:480px){.super-admin-login-modal{margin:16px;max-width:none}.login-modal-content,.login-modal-header{padding-left:16px;padding-right:16px}.two-factor-actions{flex-direction:column}.back-button,.verify-button{flex:none}}@media (prefers-color-scheme:dark){.super-admin-login-modal{background:#1f2937}.login-title,.login-title h2{color:#f9fafb}.form-group label{color:#d1d5db}.input-group input{background:#374151;border-color:#4b5563;color:#f3f4f6;padding:12px 44px 12px 12px}.input-group input:focus{background:#374151;border-color:#3b82f6}.input-group input:disabled{background:#4b5563;color:#9ca3af}.two-factor-header h3{color:#f9fafb}.two-factor-header p{color:#d1d5db}.back-button{background:#374151;border-color:#4b5563;color:#f3f4f6}.back-button:hover:not(:disabled){background:#4b5563;border-color:#6b7280}}.school-selector-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.school-selector-modal{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;max-width:800px;overflow:hidden;width:100%}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.selector-header{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;margin-bottom:24px;padding:24px 24px 0}.selector-title{align-items:center;color:#1f2937;display:flex;gap:12px}.selector-title h2{font-size:20px;font-weight:600;margin:0}.selector-close{background:none;border:none;border-radius:6px;color:#6b7280;cursor:pointer;padding:8px;transition:all .2s}.selector-close:hover{background:#f3f4f6;color:#374151}.selector-content{max-height:60vh;overflow-y:auto;padding:0 24px 24px}.search-section{margin-bottom:24px}.search-input-group{align-items:center;display:flex;position:relative}.search-input{border:2px solid #e5e7eb;border-radius:8px;color:#111;font-size:16px;padding:12px;transition:all .2s;width:100%}.search-input:focus{outline:none}.schools-list{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.school-card{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;display:flex;gap:16px;justify-content:space-between;padding:20px;transition:all .2s}.school-card:hover{border-color:#3b82f6;box-shadow:0 4px 12px #3b82f626;transform:translateY(-2px)}.school-logo{align-items:center;background:#f3f4f6;border:2px solid #e5e7eb;border-radius:8px;display:flex;flex-shrink:0;height:60px;justify-content:center;overflow:hidden;width:60px}.school-logo-image{height:100%;object-fit:cover;object-position:center;width:100%}.school-logo-placeholder{align-items:center;background:#f9fafb;color:#9ca3af;display:flex;height:100%;justify-content:center;width:100%}.school-info{flex:1 1}.school-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.school-header h3{color:#1f2937;font-size:18px;font-weight:600;margin:0}.school-status{border-radius:20px;font-size:12px;font-weight:500;letter-spacing:.5px;padding:4px 12px;text-transform:uppercase}.school-status.active{background:#dcfce7;color:#166534}.school-status.inactive{background:#fee2e2;color:#991b1b}.school-details{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.detail-item{align-items:center;color:#6b7280;display:flex;font-size:14px;gap:8px}.school-tagline{color:#4b5563;font-size:14px;font-style:italic;margin:8px 0}.school-plan{align-items:center;color:#059669;display:flex;font-size:14px;font-weight:500;gap:8px}.school-actions{color:#9ca3af;transition:all .2s}.school-card:hover .school-actions{color:#3b82f6}.admins-view{display:flex;flex-direction:column;gap:20px}.admin-header{border-bottom:1px solid #e5e7eb;padding:16px 0}.back-button{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#374151;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;padding:8px 16px;transition:all .2s}.back-button:hover{background:#f9fafb;border-color:#d1d5db}.selected-school-info{align-items:center;color:#1f2937;display:flex;font-weight:500;gap:8px}.admins-list{display:flex;flex-direction:column;gap:12px}.admin-card{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;display:flex;justify-content:space-between;padding:20px;transition:all .2s}.admin-card.selected,.admin-card:hover{border-color:#3b82f6;box-shadow:0 4px 12px #3b82f626}.admin-card.selected{background:#f0f9ff}.admin-info{flex:1 1}.admin-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.admin-header h3{color:#1f2937;font-size:18px;font-weight:600;margin:0}.admin-status{border-radius:20px;font-size:12px;font-weight:500;letter-spacing:.5px;padding:4px 12px;text-transform:uppercase}.admin-status.active{background:#dcfce7;color:#166534}.admin-status.inactive{background:#fee2e2;color:#991b1b}.admin-details{display:flex;flex-direction:column;gap:8px}.admin-actions{color:#3b82f6}.impersonation-actions{border-top:1px solid #e5e7eb;padding:20px 0}.impersonate-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:8px;justify-content:center;padding:16px 24px;transition:all .2s;width:100%}.impersonate-button.primary{background:#3b82f6;color:#fff}.impersonate-button.primary:hover:not(:disabled){background:#2563eb;box-shadow:0 4px 12px #3b82f666;transform:translateY(-1px)}.impersonate-button:disabled{background:#9ca3af;box-shadow:none;cursor:not-allowed;transform:none}.pagination{border-top:1px solid #e5e7eb;justify-content:space-between;padding:20px 0}.pagination,.pagination-button{align-items:center;display:flex}.pagination-button{background:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#374151;cursor:pointer;font-size:14px;font-weight:500;gap:8px;padding:8px 16px;transition:all .2s}.pagination-button:hover:not(:disabled){background:#f9fafb;border-color:#d1d5db}.pagination-button:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed}.pagination-info{color:#6b7280;font-size:14px;font-weight:500}.empty-state,.loading-state{align-items:center;color:#6b7280;display:flex;flex-direction:column;justify-content:center;padding:60px 20px;text-align:center}.empty-state p,.loading-state p{font-size:16px;margin:12px 0 0}.empty-state h3{color:#374151;font-size:18px;font-weight:600;margin:12px 0 8px}@media (max-width:768px){.school-selector-modal{margin:16px;max-width:none}.selector-content,.selector-header{padding-left:16px;padding-right:16px}.admin-card,.school-card{align-items:flex-start;flex-direction:column;gap:16px}.school-logo{height:50px;width:50px}.admin-actions,.school-actions{align-self:flex-end}.admin-header{align-items:flex-start}.admin-header,.pagination{flex-direction:column;gap:12px}.pagination-button{justify-content:center;width:100%}}.school-data-wizard-overlay{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000059;display:flex;inset:0;justify-content:center;position:fixed;z-index:10000}.school-data-wizard-modal{animation:wizardSlideIn .3s ease-out;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;max-height:90vh;max-width:980px;overflow:hidden;width:90vw}@keyframes wizardSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.school-data-wizard-header{align-items:center;background:linear-gradient(135deg,#059669,#047857);color:#fff;display:flex;justify-content:space-between;padding:24px 32px}.wizard-title{align-items:center;display:flex;gap:12px}.wizard-title h2{font-size:24px;font-weight:600;margin:0}.wizard-context{align-items:center;background:#fff3;border:1px solid #ffffff4d;border-radius:6px;color:#fff;display:flex;font-size:14px;font-weight:500;gap:8px;margin-left:16px;padding:8px 12px}.wizard-context span{align-items:center;display:flex;gap:4px}.header-actions{gap:8px}.stop-impersonation-button{background:#ffc10733;border:none;border-radius:8px;color:#fff;cursor:pointer;padding:8px;transition:all .2s ease}.stop-impersonation-button:hover:not(:disabled){background:#ffc1074d;transform:scale(1.05)}.stop-impersonation-button:disabled{cursor:not-allowed;opacity:.5;transform:none}.logout-button{background:#fff3;border:none;border-radius:8px;color:#fff;cursor:pointer;padding:8px;transition:all .2s ease}.logout-button:hover{background:#ffffff4d;transform:scale(1.05)}.wizard-close{background:#fff3;border:none;border-radius:8px;color:#fff;cursor:pointer;padding:8px;transition:all .2s ease}.wizard-close:hover{background:#ffffff4d;transform:scale(1.05)}.wizard-progress{align-items:center;background:#f8f9fa;border-bottom:1px solid #e9ecef;display:flex;padding:24px 32px}.progress-step{flex:1 1;position:relative}.progress-step,.step-circle{align-items:center;display:flex}.step-circle{background:#e9ecef;border-radius:50%;color:#6c757d;height:40px;justify-content:center;transition:all .3s ease;width:40px;z-index:2}.progress-step.active .step-circle{background:#059669;box-shadow:0 4px 12px #0596694d;color:#fff}.progress-step.completed .step-circle{background:#28a745;color:#fff}.step-info{display:flex;flex-direction:column;margin-left:12px}.step-title{color:#495057;font-size:14px;font-weight:600}.step-description{color:#6c757d;font-size:12px;margin-top:2px}.progress-step.active .step-title{color:#059669}.progress-step.completed .step-title{color:#28a745}.step-connector{background:#e9ecef;height:2px;left:40px;position:absolute;right:-20px;top:20px;z-index:1}.progress-step.completed .step-connector{background:#28a745}.wizard-content{background:#f9fafb;flex:1 1;overflow-y:auto;padding:32px}.mapping-section .field-mapping-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px}.mapping-section .field-mapping-item.header{background:#f9fafb;border:1px dashed #e5e7eb}.mapping-section .field-input span,.mapping-section .field-label span,.mapping-section .field-type span{color:#111827}.mapping-section input[type=number],.mapping-section input[type=text],.mapping-section select{background:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#111827;padding:8px 10px}.mapping-section .field-mapping-item .nav-button.secondary{background:#fff;border-color:#e5e7eb;color:#111827}.mapping-section .field-label svg{color:#94a3b8}.wizard-step-content{animation:stepFadeIn .3s ease-out}@keyframes stepFadeIn{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.step-header{margin-bottom:32px;text-align:center}.step-header svg{color:#059669;margin-bottom:16px}.step-header h3{color:#2d3748;font-size:28px;font-weight:600;margin:0 0 8px}.step-header p{color:#718096;font-size:16px;line-height:1.5;margin:0}.dataset-selector-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin:0 auto;max-width:820px}.dataset-card{background:#fff;border:2px solid #e2e8f0;border-radius:14px;cursor:pointer;overflow:hidden;position:relative;transition:all .2s ease}.dataset-card:hover{border-color:#cbd5e0;box-shadow:0 8px 20px #0284c71f;transform:translateY(-1px)}.dataset-card input[type=radio]{inset:0;opacity:0;pointer-events:none;position:absolute}.dataset-card.selected{border-color:#059669;box-shadow:0 8px 24px #05966940}.dataset-card-inner{align-items:center;display:flex;flex-direction:column;gap:10px;justify-content:center;padding:24px 16px;text-align:center}.dataset-icon{background:#f1f5f9;border-radius:16px;height:64px;width:64px}.dataset-icon.students{background:linear-gradient(135deg,#3b82f6,#60a5fa)}.dataset-icon.teachers{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}.dataset-icon.staff{background:linear-gradient(135deg,#06b6d4,#22d3ee)}.dataset-title{color:#1f2937;font-size:16px;font-weight:600}.dataset-desc{color:#6b7280;font-size:13px}@media (max-width:900px){.dataset-selector-grid{grid-template-columns:1fr;max-width:420px}}.connection-status{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;margin-bottom:24px}.status-item{background:#f0fdf4;border:1px solid #bbf7d0;flex:1 1;gap:12px;min-width:200px;padding:16px}.status-icon,.status-item{align-items:center;border-radius:12px;display:flex}.status-icon{height:48px;justify-content:center;width:48px}.status-icon.success{background:#dcfce7;color:#166534}.status-content h4{color:#2d3748;font-size:16px;font-weight:600;margin:0 0 4px}.status-content p{color:#718096;font-size:14px;margin:0}.data-retrieval-section{display:flex;flex:1 1;flex-direction:column;min-height:0}.coming-soon-notice{align-items:center;background:#fef3c7;border:1px solid #fde68a;border-radius:12px;display:flex;flex-direction:column;gap:16px;margin-bottom:24px;padding:32px}.coming-soon-notice svg{color:#d97706}.coming-soon-notice h4{color:#92400e;font-size:18px;font-weight:600;margin:0}.coming-soon-notice p{color:#92400e;font-size:14px;line-height:1.5;margin:0}.retrieval-actions{display:flex;justify-content:center}.retrieve-button{align-items:center;background:linear-gradient(135deg,#059669,#047857);border:none;border-radius:12px;box-shadow:0 4px 12px #0596694d;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:12px;padding:16px 32px;transition:all .3s ease}.retrieve-button:hover:not(:disabled){box-shadow:0 8px 20px #05966966;transform:translateY(-2px)}.retrieve-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.wizard-navigation{align-items:center;background:#f8f9fa;border-top:1px solid #e9ecef;display:flex;justify-content:space-between;padding:24px 32px}.nav-button{background:#fff;border:1px solid #e2e8f0;color:#4a5568;font-size:14px;gap:8px;padding:12px 20px}.nav-button:hover:not(:disabled){background:#f7fafc;border-color:#cbd5e0;transform:translateY(-1px)}.nav-button.primary{background:#059669;border-color:#059669;color:#fff}.nav-button.secondary{color:#1f2937}.nav-button.primary:hover:not(:disabled){background:#047857;border-color:#047857}.nav-button:disabled{opacity:.5;transform:none}.step-indicator{color:#718096;font-size:14px;font-weight:500}@media (max-width:768px){.school-data-wizard-modal{max-height:95vh;width:95vw}.school-data-wizard-header,.wizard-progress{padding:16px 20px}.wizard-progress{flex-direction:column;gap:16px}.progress-step{width:100%}.step-connector{display:none}.wizard-content{padding:20px}.wizard-navigation{flex-direction:column;gap:12px;padding:16px 20px}.nav-button{justify-content:center;width:100%}.connection-status{flex-direction:column;gap:12px}.status-item{flex-direction:row;gap:12px;min-width:auto;text-align:left}.wizard-context{align-items:flex-start;flex-direction:column;margin-left:0;margin-top:8px}}.school-data-wizard-modal{background:#fff!important;color:#1f2937!important}.school-data-wizard-modal .wizard-progress{background:#f8f9fa!important;border-color:#e9ecef!important}.school-data-wizard-modal .step-title{color:#495057!important}.school-data-wizard-modal .step-description{color:#6c757d!important}.school-data-wizard-modal .wizard-content{background:#f9fafb!important}.school-data-wizard-modal .step-header h3{color:#2d3748!important}.school-data-wizard-modal .step-header p{color:#718096!important}.school-data-wizard-modal .status-item{background:#f0fdf4!important;border-color:#bbf7d0!important}.school-data-wizard-modal .status-content h4{color:#2d3748!important}.school-data-wizard-modal .status-content p{color:#718096!important}.school-data-wizard-modal .coming-soon-notice{background:#fef3c7!important;border-color:#fde68a!important}.school-data-wizard-modal .coming-soon-notice h4,.school-data-wizard-modal .coming-soon-notice p{color:#92400e!important}.school-data-wizard-modal .wizard-navigation{background:#f8f9fa!important;border-color:#e9ecef!important}.school-data-wizard-modal .nav-button{background:#fff!important;border-color:#e2e8f0!important;color:#4a5568!important}.school-data-wizard-modal .nav-button:hover:not(:disabled){background:#f7fafc!important;border-color:#cbd5e0!important;color:#1f2937!important}.school-data-wizard-modal .nav-button.primary{background:#059669!important;border-color:#059669!important;color:#fff!important}.school-data-wizard-modal .nav-button.primary:hover:not(:disabled){background:#047857!important;border-color:#047857!important;color:#fff!important}.school-data-wizard-modal .nav-button:not(.primary){background:#fff!important;border:2px solid #059669!important;color:#059669!important;font-weight:600!important;padding:10px 16px!important}.school-data-wizard-modal .nav-button:not(.primary):hover:not(:disabled){background:#059669!important;box-shadow:0 4px 8px #0596694d!important;color:#fff!important;transform:translateY(-1px)!important}.school-data-mode-toggle{align-items:center;display:flex}.toggle-switch{background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;display:flex;padding:2px}.toggle-option{align-items:center;background:#0000;border:none;border-radius:4px;color:#6b7280;cursor:pointer;display:flex;font-size:12px;font-weight:500;gap:4px;padding:6px 10px;transition:all .2s ease;white-space:nowrap}.toggle-option:hover{background:#e5e7eb;color:#374151}.toggle-option.active{background:#3b82f6;box-shadow:0 1px 3px #3b82f64d;color:#fff}.toggle-option.active:hover{background:#2563eb}.confirmation-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10000}.confirmation-dialog{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:80vh;max-width:480px;overflow-y:auto;width:90%}.confirmation-header{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;gap:12px;padding:20px 24px 16px}.warning-icon{color:#f59e0b;flex-shrink:0}.confirmation-header h3{color:#111827;font-size:18px;font-weight:600;margin:0}.confirmation-content{padding:20px 24px}.confirmation-content p{color:#374151;line-height:1.5;margin:0 0 16px}.cleanup-list{list-style:none;margin:12px 0 16px;padding-left:0}.cleanup-list li{color:#6b7280;font-size:14px;padding:4px 0}.warning-text{background:#fef3c7;border:1px solid #fbbf24;border-radius:6px;color:#92400e;font-weight:500;margin:16px 0 0;padding:12px}.confirmation-actions{border-top:1px solid #e5e7eb;display:flex;gap:12px;justify-content:flex-end;padding:16px 24px 20px}.cancel-button,.confirm-button{border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px;transition:all .2s ease}.cancel-button{background:#f3f4f6;border:1px solid #d1d5db;color:#374151}.cancel-button:hover{background:#e5e7eb}.confirm-button{background:#dc2626;color:#fff}.confirm-button:hover{background:#b91c1c}@media (prefers-color-scheme:dark){.toggle-switch{background:#374151;border-color:#4b5563}.toggle-option{color:#9ca3af}.toggle-option:hover{background:#4b5563;color:#d1d5db}.confirmation-dialog{background:#1f2937;border:1px solid #374151}.confirmation-header{border-bottom-color:#374151}.confirmation-header h3{color:#f9fafb}.confirmation-content p{color:#d1d5db}.cleanup-list li{color:#9ca3af}.warning-text{background:#451a03;border-color:#92400e;color:#fbbf24}.confirmation-actions{border-top-color:#374151}.cancel-button{background:#374151;border-color:#4b5563;color:#d1d5db}.cancel-button:hover{background:#4b5563}}@media (max-width:768px){.school-data-mode-toggle{flex-direction:column;gap:8px}.confirmation-dialog{margin:20px;width:calc(100% - 40px)}.confirmation-actions{flex-direction:column}.cancel-button,.confirm-button{width:100%}}.project-actions-dropdown{display:inline-block;position:relative}.dropdown-trigger{align-items:center;background:#3b82f6;border:none;border-radius:6px;box-shadow:0 1px 3px #3b82f64d;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:6px;padding:8px 12px;transition:all .2s ease}.dropdown-trigger:hover{background:#2563eb;box-shadow:0 2px 6px #3b82f666;transform:translateY(-1px)}.dropdown-trigger:active{transform:translateY(0)}.chevron{transition:transform .2s ease}.chevron.open{transform:rotate(180deg)}.dropdown-menu{background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;left:0;margin-top:4px;min-width:200px;overflow:hidden;position:absolute;top:100%;z-index:1000}.dropdown-section{padding:8px 0}.dropdown-section:not(:last-child){border-bottom:1px solid #f3f4f6}.dropdown-section h4{color:#6b7280;font-size:12px;font-weight:600;letter-spacing:.05em;margin:0 0 8px;padding:0 12px;text-transform:uppercase}.dropdown-item{align-items:center;background:none;border:none;color:#374151;cursor:pointer;display:flex;font-size:14px;gap:10px;padding:10px 12px;text-align:left;transition:background-color .15s ease;width:100%}.dropdown-item:hover{background:#f3f4f6;color:#111827}.dropdown-item:active{background:#e5e7eb}.dropdown-item:disabled{color:#9ca3af;cursor:not-allowed}.dropdown-item:disabled:hover{background:none;color:#9ca3af}.dropdown-item svg{color:#6b7280;flex-shrink:0}.dropdown-item:hover svg{color:#374151}@media (prefers-color-scheme:dark){.dropdown-menu{background:#1f2937;border-color:#374151}.dropdown-section:not(:last-child){border-bottom-color:#374151}.dropdown-section h4{color:#9ca3af}.dropdown-item{color:#d1d5db}.dropdown-item:hover{background:#374151;color:#f9fafb}.dropdown-item:active{background:#4b5563}.dropdown-item:disabled{color:#6b7280}.dropdown-item:disabled:hover{background:none;color:#6b7280}.dropdown-item svg{color:#9ca3af}.dropdown-item:hover svg{color:#d1d5db}}@media (max-width:768px){.dropdown-menu{left:auto;min-width:180px;right:0}.dropdown-item{font-size:15px;padding:12px 16px}.dropdown-section h4{font-size:13px;padding:0 16px}}.dropdown-menu{animation:dropdownFadeIn .15s ease-out}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-trigger:focus{outline:2px solid #3b82f6;outline-offset:2px}.dropdown-item:focus{outline:2px solid #3b82f6;outline-offset:-2px}.animated-project-name-container{align-items:center;display:flex;position:relative}.app-name{cursor:default;font-size:18px;font-weight:700;transition:all .3s ease}.app-name.saving,.app-name.unsaved{color:#f59e0b!important}.app-name.saving{animation:pulse 1.5s ease-in-out infinite}.app-name.saved{color:#10b981!important}.app-name.gradient-animation{-webkit-text-fill-color:#0000;animation:gradientShift 2s ease-in-out;background:linear-gradient(45deg,#10b981,#34d399,#6ee7b7,#10b981);-webkit-background-clip:text;background-clip:text;background-size:300% 300%;color:#0000!important}.project-name-input{background:#0000;border:2px solid #e5e7eb;border-radius:6px;color:#374151;font-size:16px;font-weight:600;max-width:300px;min-width:200px;outline:none;padding:8px 12px;transition:all .3s ease}.project-name-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.project-name-input:focus::placeholder{color:#0000}.project-name-input.saving,.project-name-input.unsaved{border-color:#f59e0b!important;color:#f59e0b!important}.project-name-input.saving{animation:pulse 1.5s ease-in-out infinite}.project-name-input.saved{border-color:#10b981!important;color:#10b981!important}.project-name-input.gradient-animation{-webkit-text-fill-color:#0000;animation:gradientShift 2s ease-in-out;background:linear-gradient(45deg,#10b981,#34d399,#6ee7b7,#10b981);-webkit-background-clip:text;background-clip:text;background-size:300% 300%;border-color:#10b981!important;color:#0000!important}.gradient-overlay{animation:gradientShift 2s ease-in-out;background:linear-gradient(45deg,#10b9811a,#34d3991a,#6ee7b71a,#10b9811a);background-size:300% 300%;border-radius:6px;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:-1}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@media (prefers-color-scheme:dark){.app-name.saving,.app-name.unsaved{color:#fbbf24!important}.app-name.saved{color:#34d399!important}.app-name.gradient-animation{-webkit-text-fill-color:#0000;background:linear-gradient(45deg,#34d399,#6ee7b7,#a7f3d0,#34d399);-webkit-background-clip:text;background-clip:text;background-size:300% 300%}.project-name-input{background:#1f293780;border-color:#374151;color:#f9fafb}.project-name-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633}.project-name-input.saving,.project-name-input.unsaved{border-color:#fbbf24!important;color:#fbbf24!important}.project-name-input.saved{border-color:#34d399!important;color:#34d399!important}.project-name-input.gradient-animation{-webkit-text-fill-color:#0000;background:linear-gradient(45deg,#34d399,#6ee7b7,#a7f3d0,#34d399);-webkit-background-clip:text;background-clip:text;background-size:300% 300%;border-color:#34d399!important}.gradient-overlay{background:linear-gradient(45deg,#34d39926,#6ee7b726,#a7f3d026,#34d39926);background-size:300% 300%}}@media (max-width:768px){.project-name-input{font-size:14px;max-width:200px;min-width:150px;padding:6px 10px}}.project-name-input:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.project-name-input{transition:color .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease}.live-data-toggle-container{display:inline-block;position:relative}.live-data-toggle{align-items:center;background:#fff;border:2px solid #e1e5e9;border-radius:8px;box-shadow:0 2px 4px #0000001a;color:#374151;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;padding:8px 16px;transition:all .2s ease}.live-data-toggle:hover:not(:disabled){border-color:#3b82f6;box-shadow:0 4px 8px #3b82f626}.live-data-toggle.active{background:#10b981;border-color:#10b981;color:#fff}.live-data-toggle.active:hover{background:#059669;border-color:#059669}.live-data-toggle.loading{background:#f3f4f6;border-color:#d1d5db;color:#6b7280;cursor:not-allowed}.live-data-toggle.error{background:#fef2f2;border-color:#fca5a5;color:#dc2626}.live-data-toggle.disabled{background:#f9fafb;border-color:#e5e7eb;color:#9ca3af;cursor:not-allowed}.live-data-toggle .spinning{animation:spin 1s linear infinite}.toggle-tooltip{align-items:flex-start;background:#1f2937;border-radius:8px;box-shadow:0 4px 12px #00000026;color:#fff;display:flex;font-size:12px;gap:8px;left:50%;margin-top:8px;max-width:300px;padding:12px;position:absolute;top:100%;transform:translateX(-50%);white-space:nowrap;white-space:normal;z-index:1000}.toggle-tooltip.error{background:#dc2626}.tooltip-content{flex:1 1}.tooltip-title{font-weight:600;margin-bottom:4px}.tooltip-description{line-height:1.4;opacity:.9}.live-data-top-bar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 8px 32px #0000001a;left:50%;padding:8px 12px;position:fixed;top:84px;transform:translateX(-50%);z-index:1000}.top-bar-content{align-items:center;display:flex;gap:10px}.nav-button,.navigation-controls{align-items:center;display:flex;gap:4px}.nav-button{background:#0000;border:none;border-radius:8px;color:#333;color:var(--text-primary,#333);cursor:pointer;font-size:12px;font-weight:500;height:36px;justify-content:center;min-width:60px;padding:0 8px;transition:all .2s ease;width:auto}.nav-button svg{fill:currentColor!important;stroke:currentColor!important;color:inherit!important;height:16px!important;width:16px!important}.nav-text{color:inherit;font-size:12px;font-weight:500;white-space:nowrap}.nav-button:hover:not(:disabled){background:#0000000f;color:var(--text-primary)}.nav-button:disabled{background:#0000;color:#666;color:var(--text-secondary,#666);cursor:not-allowed;opacity:.6}.nav-button:disabled svg{fill:currentColor!important;stroke:currentColor!important;color:inherit!important;opacity:1!important}.nav-button:disabled .nav-text{color:inherit;opacity:1}.record-counter{align-items:center;color:var(--text-primary);display:flex;font-size:14px;font-weight:500}.counter-with-jump{align-items:center;display:flex;gap:8px}.jump-input{background:var(--background-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:12px;height:28px;padding:4px 6px;text-align:center;transition:all .2s ease;width:60px}.jump-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px #3b82f61a;outline:none}.jump-input:disabled{background:var(--background-secondary);color:var(--text-secondary);cursor:not-allowed}.jump-input::placeholder{color:var(--text-secondary);font-size:11px}.loading-indicator{align-items:center;color:#6b7280;display:flex;gap:8px}.loading-indicator .spinning{animation:spin 1s linear infinite}.live-indicator{align-items:center;color:#10b981;display:flex;font-size:12px;font-weight:500;gap:6px}.live-dot{animation:pulse 2s infinite;background:#10b981;border-radius:50%;height:8px;width:8px}.create-button{align-items:center;background:#10b981;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:500;gap:4px;height:36px;justify-content:center;padding:0 12px;transition:all .2s ease}.create-button:hover:not(:disabled){background:#059669;box-shadow:0 4px 8px #10b9814d;transform:translateY(-1px)}.create-button:disabled{background:#9ca3af;box-shadow:none;cursor:not-allowed;transform:none}.create-button svg{fill:currentColor!important;stroke:currentColor!important;color:inherit!important;height:16px!important;width:16px!important}.create-text{color:inherit;white-space:nowrap}.create-text,.delete-button{font-size:12px;font-weight:500}.delete-button{align-items:center;background:#dc2626;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;gap:4px;height:36px;justify-content:center;padding:0 12px;transition:all .2s ease}.delete-button:hover:not(:disabled){background:#b91c1c;box-shadow:0 4px 8px #dc26264d;transform:translateY(-1px)}.delete-button:disabled{background:#9ca3af;box-shadow:none;cursor:not-allowed;transform:none}.delete-button svg{fill:currentColor!important;stroke:currentColor!important;color:inherit!important;height:16px!important;width:16px!important}.delete-text{color:inherit;font-size:12px;font-weight:500;white-space:nowrap}.delete-button .spinning{animation:spin 1s linear infinite}[data-theme=dark] .live-data-top-bar{background:#202020f2;border-color:var(--border-color)}[data-theme=dark] .nav-button{color:#e5e7eb}[data-theme=dark] .nav-button:hover:not(:disabled){background:#ffffff0f;color:#e5e7eb}[data-theme=dark] .nav-button:disabled{color:#9ca3af}[data-theme=dark] .nav-button svg{fill:currentColor!important;stroke:currentColor!important;color:inherit!important}[data-theme=dark] .nav-text{color:inherit}[data-theme=dark] .record-counter{color:#e5e7eb}[data-theme=dark] .jump-input{background:#374151cc;border-color:#4b5563;color:#e5e7eb}[data-theme=dark] .jump-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}[data-theme=dark] .jump-input:disabled{background:#1f293780;color:#6b7280}[data-theme=dark] .jump-input::placeholder{color:#9ca3af}[data-theme=dark] .field-item.used-in-canvas{background:#3b82f60d}[data-theme=dark] .field-item.used-in-canvas .field-header{background:#3b82f614}[data-theme=dark] .field-item.used-in-canvas .field-header:hover{background:#3b82f61f}[data-theme=dark] .canvas-indicator{color:#60a5fa}.live-data-token-panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;left:20px;max-height:80vh;overflow:hidden;position:fixed;top:50%;transform:translateY(-50%);width:320px;z-index:200}.live-data-token-panel.collapsed{height:auto}.panel-header{background:#f8fafc;border-bottom:1px solid #e5e7eb;padding:12px 16px}.header-content{justify-content:space-between}.header-content,.header-title{align-items:center;display:flex}.header-title{color:#374151;font-weight:600;gap:8px}.header-actions{align-items:center;display:flex;gap:4px}.close-button,.collapse-button{align-items:center;background:#0000;border:none;border-radius:4px;color:#6b7280;cursor:pointer;display:flex;height:24px;justify-content:center;transition:all .2s ease;width:24px}.close-button:hover,.collapse-button:hover{background:#e5e7eb;color:#374151}.panel-search{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;gap:8px;padding:12px 16px}.search-input{border:1px solid #d1d5db;border-radius:6px;flex:1 1;font-size:14px;outline:none;padding:6px 8px;transition:border-color .2s ease}.search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.fields-list{flex:1 1;overflow-y:auto;padding:8px 0}.fields-list.simple{display:flex;flex-direction:column;gap:8px;padding:8px 16px}.field-row{grid-gap:8px;align-items:center;display:grid;gap:8px;grid-template-columns:160px 1fr auto}.field-row .field-label{color:#374151;font-weight:500}.field-row .reset-button{height:22px;width:22px}.field-row.modified .field-label:after{color:#ef4444;content:"*";margin-left:4px}.no-fields{align-items:center;color:#6b7280;display:flex;font-size:14px;gap:8px;padding:16px}.field-item{border-bottom:1px solid #f3f4f6}.field-item.modified{background:#fef3c7}.field-item.used-in-canvas{background:#3b82f605;border-left:3px solid #3b82f6}.field-item.used-in-canvas .field-header{background:#3b82f60d}.field-item.used-in-canvas .field-header:hover{background:#3b82f614}.field-header{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:12px 16px;transition:background-color .2s ease}.field-header:hover{background:#f8fafc}.field-info{flex:1 1}.field-label{align-items:center;color:#374151;display:flex;font-size:14px;font-weight:500;gap:6px}.canvas-indicator{animation:pulse 2s infinite;color:#3b82f6;font-size:12px;font-weight:700;margin-left:4px}.modified-indicator{color:#f59e0b}.field-name{color:#6b7280;font-size:12px;margin-top:2px}.field-actions{gap:4px}.field-actions,.reset-button{align-items:center;display:flex}.reset-button{background:#0000;border:none;border-radius:4px;color:#6b7280;cursor:pointer;height:20px;justify-content:center;transition:all .2s ease;width:20px}.reset-button:hover{background:#e5e7eb;color:#374151}.field-content{background:#f8fafc;padding:0 16px 12px}.field-input-group{align-items:center;display:flex;gap:8px;margin-bottom:8px}.field-input{border:1px solid #d1d5db;border-radius:6px;flex:1 1;font-size:14px;outline:none;padding:8px 12px;transition:border-color .2s ease}.field-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.field-input:disabled{background-color:#f3f4f6;color:#6b7280}.checkbox-group input[type=checkbox]:disabled,.field-input:disabled,.radio-group input[type=radio]:disabled{cursor:not-allowed;opacity:.6}.checkbox-group label:has(input[type=checkbox]:disabled),.radio-group label:has(input[type=radio]:disabled){color:#6b7280;cursor:not-allowed;opacity:.6}.field-row.disabled{background-color:#f9fafb;opacity:.7}.field-row.disabled .field-label{color:#6b7280}.disabled-indicator{font-size:12px;margin-left:6px;opacity:.8}.save-indicator{align-items:center;color:#10b981;display:flex}.field-error{color:#dc2626;gap:6px;margin-bottom:8px}.field-error,.field-preview{align-items:center;display:flex;font-size:12px}.field-preview{color:#6b7280;gap:8px}.preview-label{font-weight:500}.preview-value{background:#f3f4f6;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;padding:2px 6px}.panel-footer{background:#f8fafc;border-top:1px solid #e5e7eb;padding:8px 16px}.footer-stats{align-items:center;color:#6b7280;display:flex;font-size:12px;justify-content:space-between}.modified-count{color:#f59e0b;font-weight:500}.resize-handle{background:#0000;cursor:col-resize;height:100%;position:absolute;right:0;top:0;width:4px}.resize-handle:hover{background:#3b82f6}.image-field-container{display:flex;flex-direction:column;gap:8px}.upload-indicator{color:#6b7280;font-size:12px;font-style:italic}.image-input{background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:12px;padding:8px}.image-input:disabled{cursor:not-allowed;opacity:.6}.image-preview{align-items:center;border:1px solid #e5e7eb;border-radius:6px;display:flex;justify-content:center;min-height:100px;overflow:hidden}.preview-image{max-height:100px;max-width:100%;object-fit:contain}.no-image-placeholder{background:#f8f9fa;border:2px dashed #dee2e6;border-radius:8px;color:#6c757d}.no-image-placeholder,.uploading-placeholder{align-items:center;display:flex;flex-direction:column;font-size:12px;gap:8px;height:100px;justify-content:center}.uploading-placeholder{background:#e3f2fd;border:2px dashed #2196f3;border-radius:8px;color:#1976d2}.uploading-placeholder .spinning{animation:spin 1s linear infinite}[data-theme=dark] .image-input{background:#374151;border-color:#4b5563;color:#e5e7eb}[data-theme=dark] .image-preview{border-color:#4b5563}[data-theme=dark] .no-image-placeholder{background:#374151;border-color:#4b5563;color:#9ca3af}[data-theme=dark] .uploading-placeholder{background:#1e3a8a;border-color:#3b82f6;color:#60a5fa}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.create-record-modal{max-height:90vh;max-width:2000px;overflow-y:auto;width:99vw}.modal-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:10000}.modal-content{background:#f8fafc;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.modal-header{background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid #e5e7eb;color:#fff;justify-content:space-between;padding:20px 24px}.modal-header,.modal-title{align-items:center;display:flex}.modal-title{color:#111827;font-size:18px;font-weight:600;gap:8px;margin:0}.modal-close{align-items:center;background:none;border:none;border-radius:6px;color:#6b7280;cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s ease;width:32px}.modal-close:hover{background:#e5e7eb;color:#374151}.modal-body{background:#f8fafc;color:#1f2937;flex:1 1;overflow-y:auto;padding:24px}.form-sections-container{grid-gap:20px;align-items:stretch;display:grid;gap:20px;grid-template-columns:1fr 1fr 1fr 1fr;margin-bottom:24px}.modal-footer{align-items:center;background:#f9fafb;border-top:1px solid #e5e7eb;display:flex;gap:12px;justify-content:flex-end;padding:20px 24px}.form-section{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;height:100%;margin-bottom:32px;min-height:500px;padding:20px}.form-section:last-child{margin-bottom:0}.form-section-title{border-bottom:2px solid #e5e7eb;color:#000!important;font-size:16px;font-weight:600;margin:0 0 16px;padding-bottom:8px}.form-subsection-title{color:#000!important;font-size:14px;font-weight:500;margin:0 0 12px}.form-row{grid-gap:16px;display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-bottom:16px}.create-record-modal .form-row,.form-row.form-row-single{grid-template-columns:1fr}.form-group{margin-bottom:16px}.form-label{align-items:center;color:#000!important;display:flex;font-size:14px;font-weight:500;gap:6px;margin-bottom:6px}.required{color:#dc2626;margin-left:2px}.form-input{background:#fff!important;border:1px solid #d1d5db;border-radius:6px;color:#000!important;font-size:14px;padding:10px 12px;transition:all .2s ease;width:100%}.form-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;outline:none}.form-input.error{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.form-input::placeholder{color:#9ca3af}.create-record-modal .form-section *{color:#000!important}.create-record-modal .form-section input,.create-record-modal .form-section select,.create-record-modal .form-section textarea{background:#fff!important;color:#000!important}.create-record-modal .form-section input::placeholder,.create-record-modal .form-section select::placeholder,.create-record-modal .form-section textarea::placeholder{color:#9ca3af!important}.guardian-search-section{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:16px;padding:12px}.guardian-search-input{align-items:center;display:flex;gap:8px}.guardian-search-input input{flex:1 1}.search-button{align-items:center;background:#3b82f6;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;transition:all .2s ease}.search-button:hover:not(:disabled){background:#2563eb}.search-button:disabled{background:#9ca3af;cursor:not-allowed}.guardian-search-results{margin-top:8px}.guardian-search-results h5{color:#1f2937;font-size:14px;font-weight:600;margin:0 0 8px}.guardian-result-item{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:6px;display:flex;justify-content:space-between;margin-bottom:6px;padding:8px}.guardian-info{display:flex;flex-direction:column;gap:4px}.guardian-info strong{color:#1f2937;font-size:14px}.guardian-info span{color:#6b7280;font-size:12px}.select-guardian-button{background:#10b981;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:12px;font-weight:500;padding:6px 12px;transition:all .2s ease}.select-guardian-button:hover{background:#059669}.selected-guardian{align-items:center;background:#ecfdf5;border:1px solid #10b981;border-radius:6px;display:flex;justify-content:space-between;margin-top:12px;padding:12px}.clear-guardian-button{background:#ef4444;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:12px;font-weight:500;padding:6px 12px;transition:all .2s ease}.clear-guardian-button:hover{background:#dc2626}.form-section:has(.form-section-title:contains("Custom Fields")){min-height:500px}.form-sections-container .form-section{max-height:700px;min-height:500px;overflow-y:auto}.checkbox-group,.radio-group{display:flex;flex-direction:column;gap:8px;margin-top:4px}.form-section .form-group{margin-bottom:16px}.form-section .form-group:last-child{margin-bottom:0}.checkbox-option,.radio-option{align-items:center;cursor:pointer;display:flex;gap:8px;padding:4px 0}.checkbox-option input[type=checkbox],.radio-option input[type=radio]{cursor:pointer;margin:0}.checkbox-option span,.radio-option span{color:#1f2937;cursor:pointer;font-size:14px}.checkbox-option:hover,.radio-option:hover{background:#f8fafc;border-radius:4px;margin:-4px -8px;padding:4px 8px}.school-name{color:#6b7280;font-size:12px;font-weight:400;margin-left:4px}.file-input-container{position:relative}.file-input{cursor:pointer;padding:8px 12px}.file-preview{align-items:center;background:#f3f4f6;border-radius:4px;color:#374151;display:flex;font-size:12px;gap:6px;margin-top:6px;padding:6px 8px}.form-error{color:#dc2626;font-size:12px;margin-top:4px}.btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:6px;padding:10px 16px;text-decoration:none;transition:all .2s ease}.btn:disabled{cursor:not-allowed;opacity:.6}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb;box-shadow:0 4px 8px #3b82f64d;transform:translateY(-1px)}.btn-secondary{background:#f3f4f6;border:1px solid #d1d5db;color:#374151}.btn-secondary:hover:not(:disabled){background:#e5e7eb;transform:translateY(-1px)}.spinning{animation:spin 1s linear infinite}@media (max-width:1200px){.form-sections-container{gap:18px;grid-template-columns:1fr 1fr}}@media (max-width:768px){.live-data-token-panel{left:10px;max-width:calc(100vw - 20px);right:10px;width:auto}.top-bar-content{padding:0 8px}.navigation-controls{gap:2px}.nav-button{height:28px;width:28px}.create-record-modal{max-height:95vh;width:95vw}.form-sections-container{gap:16px;grid-template-columns:1fr}.form-row{gap:12px;grid-template-columns:1fr}.modal-body,.modal-footer,.modal-header{padding:16px}}.users-admin{background:#0b0e13;color:#e6e9ef;min-height:100vh;padding:20px}.ua-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:14px}.ua-actions{display:flex;gap:10px}.ua-create{align-items:center;display:flex;gap:8px}.ua-input,.ua-select{background:#0d1117;border:1px solid #ffffff1a;border-radius:8px}.ua-btn,.ua-input,.ua-select{color:#e6e9ef;padding:8px 10px}.ua-btn{align-items:center;background:#ffffff0f;border:1px solid #ffffff24;border-radius:8px;cursor:pointer;display:inline-flex;gap:6px}.ua-btn.primary{background:linear-gradient(90deg,#7c3aed,#6366f1);border:none}.ua-btn.small{font-size:12px;padding:6px 8px}.ua-btn.danger{border-color:#ff505080;color:#ffb3b3}.ua-loading{color:#cbd5e1;padding:20px}.ua-table-wrap{background:#10141b;border:1px solid #ffffff0f;border-radius:12px;overflow:hidden}.ua-table{border-collapse:collapse;width:100%}.ua-table td,.ua-table th{border-bottom:1px solid #ffffff0f;padding:10px 12px}.ua-table thead th{background:#0f1320;color:#cbd5e1;font-weight:600;text-align:left}.ua-row-actions{display:flex;gap:8px;justify-content:center}.ua-badge{border-radius:999px;display:inline-block;font-size:12px;padding:3px 8px}.ua-badge.ok{background:#22c55e2e;border:1px solid #22c55e59;color:#86efac}.ua-badge.danger{background:#f43f5e2e;border:1px solid #f43f5e59;color:#fda4af}.ua-pagination{align-items:center;display:flex;gap:10px;justify-content:flex-end;padding:10px}.ua-page-info{color:#cbd5e1}.login-page{background:radial-gradient(1200px 600px at 50% 0,#7877c626,#0000 60%),#0b0e13;display:grid;min-height:100vh;place-items:center}.login-card{background:#10141b;border:1px solid #ffffff0f;border-radius:14px;box-shadow:0 20px 60px #00000080;color:#e6e9ef;padding:22px;width:min(420px,92vw)}.login-header h1{font-size:22px;margin:0 0 4px}.login-header p{color:#9aa4b2;font-size:14px;margin:0 0 16px}.login-error{background:#ff50501f;border:1px solid #ff505059;border-radius:8px;color:#ffb3b3;font-size:13px;margin-bottom:10px;padding:8px 10px}.login-form{display:flex;flex-direction:column;gap:12px}.field .label{color:#9aa4b2;display:block;font-size:12px;margin-bottom:6px}.input{background:#0d1117;border:1px solid #ffffff1a;border-radius:10px;color:#e6e9ef;outline:none;padding:10px 12px;width:100%}.input:focus{border-color:#7877c6b3;box-shadow:0 0 0 3px #7877c633}.password-wrap{align-items:center;display:flex;gap:8px}.password-wrap .input{flex:1 1}.password-wrap .toggle{background:#0000;border:1px solid #ffffff26;border-radius:8px;color:#cbd5e1;cursor:pointer;padding:8px 10px}.password-wrap .toggle:hover{background:#ffffff0f}.submit{background:linear-gradient(90deg,#7c3aed,#6366f1);border:none;border-radius:10px;color:#fff;cursor:pointer;font-weight:600;margin-top:4px;padding:10px 12px;width:100%}.submit:disabled{cursor:default;opacity:.7}.topbar{align-items:center;background:#0f1320;border-bottom:1px solid #ffffff0f;color:#e6e9ef;display:flex;height:52px;justify-content:space-between;padding:0 14px}.tb-brand{cursor:pointer;font-weight:700}.tb-right{align-items:center;display:flex;gap:8px}.tb-login,.tb-logout,.tb-profile-btn{align-items:center;background:#ffffff0f;border:1px solid #ffffff24;border-radius:8px;color:#e6e9ef;cursor:pointer;display:inline-flex;gap:6px;padding:6px 10px}.tb-logout{border-color:#ff505073;color:#ffb3b3}.sidebar{background:#0b0e13;border-right:1px solid #ffffff0f;color:#e6e9ef;padding:10px;width:200px}.sb-item{align-items:center;background:#0000;border:1px solid #0000;border-radius:8px;color:#cbd5e1;cursor:pointer;display:flex;gap:8px;padding:10px 12px;width:100%}.sb-item:hover{background:#ffffff0d}.sb-item.active{background:#7877c62e;border-color:#7877c659;color:#e6e9ef}.app-shell{background:#0b0e13;display:flex;flex-direction:column;min-height:100vh}.shell-main{display:grid;grid-template-columns:200px 1fr;height:calc(100vh - 64px);min-height:0}.shell-content{min-height:0;overflow:auto;padding:16px}.dashboard{color:#e6e9ef}.cards{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.card{background:#10141b;border:1px solid #ffffff0f;border-radius:12px;padding:16px}.metric{font-size:28px;font-weight:700}.label{color:#cbd5e1}
/*# sourceMappingURL=main.4a618a8e.css.map*/