:root{--bg:#f4f6f9;--bg-panel:#fff;--bg-raised:#eef0f4;--bg-hover:#e4e7ed;--border:#d1d5db;--text:#374151;--text-dim:#6b7280;--text-bright:#111827;--accent:#2563eb;--accent-glow:#2563eb1f;--red:#dc2626;--green:#16a34a;--canvas-bg:#f1f3f6;--radius-sm:4px;--radius:8px;color:var(--text);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:13px;line-height:1.5}[data-theme=dark]{--bg:#0f1117;--bg-panel:#161b24;--bg-raised:#1e2535;--bg-hover:#252d3d;--border:#2a3347;--text:#c8d0e0;--text-dim:#6b7a94;--text-bright:#eef2ff;--accent:#4d8ef5;--accent-glow:#4d8ef533;--red:#e05c5c;--green:#4ecf82;--canvas-bg:#f1f3f6;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);overflow:hidden}#root{flex-direction:column;width:100vw;height:100dvh;display:flex}.app{flex-direction:column;height:100%;display:flex;overflow:hidden}.app-header{background:var(--bg-panel);border-bottom:1px solid var(--border);z-index:10;flex-shrink:0;align-items:center;gap:12px;height:44px;padding:0 16px;display:flex}.header-right{align-items:center;gap:8px;margin-left:auto;display:flex}.header-select-wrap{align-items:center;gap:8px;display:flex}.header-select-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:11px}.header-select{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:128px;height:30px;color:var(--text);padding:0 28px 0 10px;font-size:12px}.header-select:disabled{opacity:.45}.app-body{flex:1;display:flex;overflow:hidden}.logo{color:var(--text-bright);letter-spacing:.3px;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:15px;font-weight:600;display:flex}.logo-icon{color:var(--accent);flex-shrink:0}.btn-theme{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);width:30px;height:30px;color:var(--text-dim);justify-content:center;align-items:center;transition:background .12s,color .12s;display:flex}.btn-theme:hover{background:var(--bg-hover);color:var(--text-bright)}.status-badge{border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:12px;display:flex}.loading-badge{background:var(--accent-glow);color:var(--accent);border:1px solid var(--accent)}.error-badge{color:var(--red);background:#dc26261a;border:1px solid #dc262666}.badge-close{color:inherit;cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:14px;line-height:1}.spinner{border:2px solid;border-top-color:#0000;border-radius:50%;width:12px;height:12px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.viewer-area{background:var(--canvas-bg);flex:1;position:relative;overflow:hidden}.viewer-canvas{width:100%;height:100%;display:block}.dropzone{z-index:5;background:var(--bg);cursor:pointer;justify-content:center;align-items:center;transition:background .15s;display:flex;position:absolute;inset:0}.dropzone.dragging{background:color-mix(in srgb, var(--accent) 8%, var(--bg))}.dropzone:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.dropzone-content{color:var(--text-dim);pointer-events:none;flex-direction:column;align-items:center;gap:10px;display:flex}.dropzone.dragging .dropzone-content{color:var(--accent)}.dropzone-content>svg{opacity:.5}.dropzone-title{color:var(--text);font-size:16px;font-weight:500}.dropzone-sub{letter-spacing:.5px;text-transform:uppercase;font-size:12px}.dropzone-content .btn-primary{pointer-events:all;margin-top:4px}button{cursor:pointer}.btn-primary{background:var(--accent);color:#fff;border-radius:var(--radius-sm);border:none;padding:7px 16px;font-size:13px;font-weight:500;transition:opacity .15s}.btn-primary:hover:not(:disabled){opacity:.88}.btn-primary:disabled{opacity:.4;cursor:default}.btn-icon{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);align-items:center;gap:5px;padding:5px 10px;font-size:12px;transition:background .12s,border-color .12s;display:flex}.btn-icon:hover:not(:disabled){background:var(--bg-hover);border-color:var(--accent)}.btn-icon:disabled{opacity:.4;cursor:default}.btn-group{border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;overflow:hidden}.btn-group>*{border:none!important;border-right:1px solid var(--border)!important}.btn-group>:last-child{border-right:none!important}.btn-mode,.btn-scale{background:var(--bg-raised);color:var(--text);white-space:nowrap;border:none;padding:5px 11px;font-size:12px;transition:background .12s}.btn-mode:hover:not(:disabled),.btn-scale:hover:not(:disabled){background:var(--bg-hover);color:var(--text-bright)}.btn-mode.active,.btn-scale.active{background:var(--accent);color:#fff}.btn-mode:disabled,.btn-scale:disabled{opacity:.4;cursor:default}.info-panel{background:var(--bg-panel);border-left:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:4px;width:240px;padding:12px;display:flex;overflow-y:auto}.info-panel--empty{justify-content:center;align-items:center}.info-empty-hint{color:var(--text-dim);text-align:center;font-size:12px}.info-section{border-bottom:1px solid var(--border);padding:8px 0}.info-section:last-child{border-bottom:none}.info-heading{text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);margin-bottom:6px;font-size:10px;font-weight:600}.info-dl{grid-template-columns:auto 1fr;gap:3px 10px;font-size:12px;display:grid}.info-dl.info-dl--grid{grid-template-columns:1fr 1fr 1fr}.info-dl dt{color:var(--text-dim)}.info-dl dd{color:var(--text-bright);font-variant-numeric:tabular-nums}.element-swatches{flex-direction:column;gap:4px;display:flex}.swatch-row{justify-content:space-between;align-items:center;display:flex}.swatch-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:7px;display:flex}.swatch-input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.swatch-dot{border:1px solid #00000026;border-radius:50%;width:16px;height:16px;transition:transform .1s;display:block}[data-theme=dark] .swatch-dot{border-color:#ffffff1f}.swatch-label:hover .swatch-dot{transform:scale(1.15)}.swatch-label:hover{color:var(--text-bright)}.swatch-sym{color:var(--text);font-size:12px;font-weight:500}.swatch-count{color:var(--text-dim);font-size:11px}.bond-criteria{flex-direction:column;gap:8px;display:flex}.bond-criteria-status{color:var(--text-dim);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px;font-size:11px}.bond-criteria-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.bond-criteria-field{flex-direction:column;gap:4px;display:flex}.bond-criteria-field span{color:var(--text-dim);font-size:11px}.bond-criteria-field select,.bond-criteria-field input{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;height:28px;color:var(--text-bright);padding:0 10px;font-size:12px}.bond-criteria-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}.btn-inline{padding:4px 10px;font-size:11px}.control-panel{background:var(--bg-panel);border-top:1px solid var(--border);flex-shrink:0;align-items:center;gap:4px;height:46px;padding:0 12px;display:flex;overflow-x:auto}.ctrl-group{flex-shrink:0;align-items:center;gap:6px;display:flex}.ctrl-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;font-size:11px}.ctrl-divider{background:var(--border);flex-shrink:0;width:1px;height:28px;margin:0 4px}.supercell-matrix{align-items:center;gap:4px;display:flex}.supercell-matrix input[type=number]{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);width:36px;height:26px;color:var(--text-bright);text-align:center;-moz-appearance:textfield;font-size:13px;font-weight:500}.supercell-matrix input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.supercell-matrix input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.supercell-matrix input[type=number]:focus{border-color:var(--accent);outline:none}.supercell-matrix input[type=number]:disabled{opacity:.4}.supercell-sep{color:var(--text-dim);-webkit-user-select:none;user-select:none;font-size:13px}.export-row{align-items:center;gap:8px;display:flex}.checkbox-label{color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:5px;font-size:12px;display:flex}.checkbox-label input{accent-color:var(--accent)}.btn-export{padding:5px 12px;font-size:12px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}@media (width<=640px){.info-panel{display:none}.control-panel{flex-wrap:wrap;gap:6px;height:auto;min-height:46px;padding:6px 8px}}