:root{--bg-deep:#06070a;--bg-panel:#11141d;--bg-panel-hover:#1b1e2b;--border-neon-purple:#bd00ff;--border-neon-cyan:#00f3ff;--border-neon-green:#39ff14;--border-neon-pink:#ff007f;--text-primary:#e0e6ed;--text-muted:#8892b0;--text-neon-cyan:#00f3ff;--text-neon-purple:#d880ff;--text-neon-green:#39ff14;--sans-font:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--mono-font:ui-monospace, SFMono-Regular, Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-deep);color:var(--text-primary);font-family:var(--sans-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100vw;height:100vh;overflow:hidden}.app-container{background-color:var(--bg-deep);flex-direction:column;width:100vw;height:100vh;display:flex}.app-header{background-color:var(--bg-panel);border-bottom:2px solid var(--border-neon-purple);z-index:10;justify-content:space-between;align-items:center;padding:10px 20px;display:flex;box-shadow:0 4px 15px #bd00ff40}.header-left,.header-center,.header-right{align-items:center;gap:12px;display:flex}.project-title{letter-spacing:1px;text-shadow:0 0 5px #fff6;white-space:nowrap;text-overflow:ellipsis;max-width:180px;font-size:1.15rem;font-weight:700;overflow:hidden}.project-dims{font-family:var(--mono-font);color:var(--text-neon-cyan);background:#00f3ff1a;border:1px solid #00f3ff33;border-radius:4px;padding:2px 6px;font-size:.8rem}.btn-neon{color:var(--text-primary);border:1px solid var(--border-neon-purple);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;background:#151821;border-radius:6px;justify-content:center;align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:600;transition:all .2s ease-in-out;display:inline-flex}.btn-neon:hover:not(:disabled){border-color:var(--border-neon-purple);background:#bd00ff1a;transform:translateY(-1px);box-shadow:0 0 10px #bd00ff99}.btn-neon:active:not(:disabled){transform:translateY(0)}.btn-neon:disabled{opacity:.35;cursor:not-allowed;border-color:#3f3f46}.btn-neon-green{border-color:var(--border-neon-green);color:var(--text-neon-green)}.btn-neon-green:hover:not(:disabled){border-color:var(--border-neon-green);background:#39ff141a;box-shadow:0 0 10px #39ff1499}.btn-sm{padding:4px 10px;font-size:.75rem}.btn-xs{padding:4px 8px;font-size:.7rem}.btn-icon{width:18px;height:18px}.btn-group{background:#0000004d;border:1px solid #ffffff1a;border-radius:6px;padding:2px;display:flex}.btn-group .btn-neon{border:none;border-radius:4px;padding:6px 10px}.btn-group .btn-neon:hover:not(:disabled){box-shadow:none;background:#ffffff0d}.mode-selector{background-color:#0006;border:1px solid #00f3ff33;border-radius:8px;padding:3px;display:flex}.mode-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:.8rem;font-weight:600;transition:all .2s;display:inline-flex}.mode-btn:hover{color:var(--text-primary);background:#ffffff0d}.mode-btn.active{color:var(--text-neon-cyan);border:1px solid var(--border-neon-cyan);text-shadow:0 0 4px #00f3ff66;background:#00f3ff26;box-shadow:0 0 8px #00f3ff4d}.canvas-viewport{background-color:var(--bg-deep);flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}#cross-stitch-canvas{touch-action:none;background:#030406;display:block}.status-bar{border:1px solid var(--border-neon-cyan);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:var(--mono-font);pointer-events:none;z-index:5;background:#11141dd9;border-radius:6px;gap:16px;padding:6px 12px;font-size:.75rem;display:flex;position:absolute;bottom:12px;right:12px;box-shadow:0 0 10px #00f3ff33}.status-bar span{color:var(--text-muted)}.status-bar span#coord-display{color:var(--text-primary)}.status-bar span#zoom-display{color:var(--text-neon-cyan);font-weight:700}.app-footer{background-color:var(--bg-panel);border-top:2px solid var(--border-neon-cyan);z-index:10;grid-template-columns:1.5fr 1fr 1.25fr;height:200px;display:grid;box-shadow:0 -4px 15px #00f3ff26}.panel-section{border-right:1px solid #ffffff0d;flex-direction:column;padding:12px 18px;display:flex;overflow:hidden}.panel-section:last-child{border-right:none}.section-header{flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.section-header h3{letter-spacing:1.5px;color:var(--text-muted);text-transform:uppercase;font-size:.75rem;font-weight:800}.palette-container{flex:1;padding-right:4px;overflow-y:auto}.palette-grid{flex-direction:column;gap:8px;display:flex}.palette-item{cursor:pointer;background:#ffffff05;border:1px solid #ffffff26;border-radius:6px;align-items:center;gap:10px;width:100%;padding:6px 10px;transition:background .15s,border-color .15s;display:flex;position:relative}.palette-item:hover{background:#ffffff0d;border-color:#ffffff4d}.palette-item.active{border:1px solid var(--border-neon-cyan);background:#00f3ff0d;box-shadow:0 0 6px #00f3ff33}.palette-item .color-box{border:1px solid #0003;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:.75rem;font-weight:700;display:flex}.palette-item .color-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;text-align:left;flex:1;font-size:.8rem;overflow:hidden}.palette-item .btn-delete-color{background:var(--border-neon-pink);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:2px 6px;font-size:11px;line-height:1;transition:background .2s}.palette-item .btn-delete-color:hover{background:#ff005c}.active-color-name{font-size:.75rem;font-family:var(--mono-font);color:var(--text-neon-cyan)}.symbol-matrix-wrapper{flex:1;overflow-y:auto}.symbol-matrix{grid-template-columns:repeat(6,1fr);gap:6px;padding:4px 0;display:grid}.symbol-item{aspect-ratio:1;color:var(--text-primary);cursor:pointer;background:#ffffff08;border:1px solid #ffffff1a;border-radius:4px;justify-content:center;align-items:center;font-size:.95rem;font-weight:700;transition:all .15s;display:flex}.symbol-item:hover{border-color:var(--border-neon-cyan);background:#ffffff14}.symbol-item.active{border-color:var(--border-neon-cyan);color:var(--text-neon-cyan);background:#00f3ff1a;box-shadow:0 0 6px #00f3ff33}.tracing-controls{flex-direction:column;flex:1;gap:8px;display:flex;overflow-y:auto}.control-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.control-row.spacing-sm{margin-top:2px}.control-label{color:var(--text-muted);width:55px;font-size:.75rem;font-weight:600}.hidden-file-input{display:none}.btn-file-label{flex:1;padding:6px 10px}.neon-slider{appearance:none;background:#ffffff1a;border-radius:2px;outline:none;flex:1;height:4px}.neon-slider::-webkit-slider-thumb{appearance:none;background:var(--border-neon-cyan);cursor:pointer;width:14px;height:14px;box-shadow:0 0 6px var(--border-neon-cyan);border-radius:50%;transition:transform .1s}.neon-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider-val{font-family:var(--mono-font);color:var(--text-neon-cyan);text-align:right;width:32px;font-size:.75rem}.offset-buttons,.scale-buttons{gap:4px;display:flex}.offset-buttons button,.scale-buttons button{width:26px;height:22px;padding:0}.palette-container::-webkit-scrollbar{width:4px}.symbol-matrix-wrapper::-webkit-scrollbar{width:4px}.tracing-controls::-webkit-scrollbar{width:4px}.palette-container::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.symbol-matrix-wrapper::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.tracing-controls::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;opacity:1;background:#030406cc;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:fixed;inset:0}.modal-overlay.hidden{opacity:0;pointer-events:none}.modal-content{background:var(--bg-panel);border:2px solid var(--border-neon-purple);border-radius:12px;flex-direction:column;gap:20px;width:90%;max-width:420px;padding:24px;transition:transform .25s;display:flex;transform:translateY(0);box-shadow:0 0 25px #bd00ff66}.modal-overlay.hidden .modal-content{transform:translateY(20px)}.modal-content h2{letter-spacing:1px;color:#fff;text-shadow:0 0 8px #bd00ff66;border-bottom:1px solid #ffffff14;padding-bottom:10px;font-size:1.25rem}.modal-body{flex-direction:column;gap:16px;display:flex}.input-group{flex-direction:column;gap:6px;display:flex}.input-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.input-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:700}.input-group input[type=text],.input-group input[type=number]{color:var(--text-primary);background:#0000004d;border:1px solid #ffffff26;border-radius:6px;outline:none;padding:10px 12px;font-size:.9rem;transition:border-color .2s,box-shadow .2s}.input-group input:focus{border-color:var(--border-neon-cyan);box-shadow:0 0 6px #00f3ff4d}.modal-footer{border-top:1px solid #ffffff14;justify-content:flex-end;gap:10px;padding-top:15px;display:flex}@media (width<=900px){.app-footer{grid-template-columns:1fr;height:auto;max-height:380px;overflow-y:auto}.panel-section{border-bottom:1px solid #ffffff0d;border-right:none;height:140px;padding:15px}.panel-section:last-child{border-bottom:none}.project-title{max-width:100px}.header-left span,.header-right span{display:none}.btn-neon{padding:8px}.mode-btn span{display:none}}#preview-modal,#pdf-export-modal{display:none}#preview-modal.open,#pdf-export-modal.open{display:flex}.pdf-modal-content{width:95%;max-width:680px}.preview-panel{background:#00000040;border:1px solid #ffffff14;border-radius:8px;flex-direction:column;gap:10px;margin-top:15px;padding:14px;display:flex}.preview-stats{font-family:var(--mono-font);color:var(--text-neon-cyan);text-shadow:0 0 5px #00f3ff33;font-size:.75rem}.page-grid-map{background:#0006;border:1px solid #ffffff0d;border-radius:6px;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;max-height:200px;padding:6px;display:grid;overflow-y:auto}.page-card{background:var(--bg-panel-hover);cursor:pointer;border:1px solid #ffffff1a;border-radius:6px;flex-direction:column;align-items:center;gap:4px;padding:10px;transition:all .2s ease-in-out;display:flex}.page-card:hover{border-color:var(--border-neon-cyan);background:#00f3ff0d;transform:translateY(-1px);box-shadow:0 0 10px #00f3ff66}.page-card .page-num{color:#fff;font-size:.85rem;font-weight:700}.page-card .page-mini-view{color:var(--text-muted);font-size:.7rem}.page-card .page-coords{color:var(--text-neon-purple);font-size:.65rem}.preview-modal-content{width:95%;max-width:900px;max-height:90vh}.modal-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.btn-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.8rem;line-height:1}.btn-close:hover{color:#fff;text-shadow:0 0 5px #fff}.canvas-scroll-container{background:#0006;border:1px solid #ffffff0d;border-radius:8px;justify-content:center;align-items:flex-start;max-height:60vh;padding:15px;display:flex;overflow:auto}#modal-canvas{background:#fff;border:1px solid #444;max-width:100%;height:auto;box-shadow:0 10px 25px #0009}.neon-select{color:var(--text-primary);cursor:pointer;background:#0000004d;border:1px solid #ffffff26;border-radius:6px;outline:none;padding:10px 12px;font-size:.9rem}.neon-select:focus{border-color:var(--border-neon-cyan);box-shadow:0 0 6px #00f3ff4d}.color-adder-panel{background:#0006;border:1px solid #ffffff14;border-radius:6px;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;display:flex;box-shadow:inset 0 2px 4px #0009}.neon-color-picker{cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:4px;flex-shrink:0;width:32px;height:32px;padding:2px;transition:border-color .2s}.neon-color-picker:hover{border-color:var(--border-neon-cyan)}.color-adder-panel .neon-input-sm{color:#fff;background:#0000004d;border:1px solid #ffffff26;border-radius:4px;outline:none;flex:1;padding:6px 10px;font-size:.8rem;transition:border-color .2s,box-shadow .2s}.color-adder-panel .neon-input-sm:focus{border-color:var(--border-neon-cyan);box-shadow:0 0 6px #00f3ff4d}.color-adder-panel .btn-neon{flex-shrink:0;padding:6px 12px;font-size:.75rem}