html,body{--surface-light: #faf9f6;margin:0;padding:0;width:100%;height:100%;font-family:Arial,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--surface-light)}#container{display:flex;flex-direction:row;width:100%;height:100vh;overflow:hidden}#sidebar{flex:0 0 250px;background-color:var(--surface-light);overflow-y:auto;box-shadow:2px 0 10px #0000001a;z-index:10;border-right:1px solid #eaeaea;display:flex;flex-direction:column;height:100%;scrollbar-width:none;-ms-overflow-style:none}#sidebar::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}.sidebar-header{padding:20px 16px;border-bottom:1px solid #eaeaea;background:linear-gradient(to right,#6fc524,#5ca9fb);color:#000}.sidebar-header h1{margin:0;font-size:22px;font-weight:600}.sidebar-content{flex:1;overflow-y:auto;padding:0;scrollbar-width:none;-ms-overflow-style:none}.sidebar-content::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}#viewer{flex:1 1 auto;position:relative;min-width:0;background-color:var(--surface-light)}.gene-expression-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-rows:repeat(1,minmax(0,1fr));gap:10px;padding:10px;box-sizing:border-box;z-index:3}.gene-expression-grid.hidden{display:none}.gene-expression-view{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--surface-light);border:1px solid rgba(210,216,224,.9)}.gene-expression-view-canvas{width:100%;height:100%}.gene-expression-view-canvas canvas{display:block;width:100%;height:100%}.gene-expression-view-title{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:20;max-width:calc(100% - 96px);color:#23384c;font-size:16px;font-weight:700;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(255,255,255,.75);pointer-events:none}.gene-expression-colorbar{position:absolute;top:12px;left:12px;z-index:20;width:46px;padding:0;pointer-events:none}.gene-expression-colorbar.hidden{display:none}.gene-expression-colorbar-gene{margin-bottom:6px;color:#304254;font-size:11px;font-weight:700;line-height:1.1;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gene-expression-colorbar-scale{display:flex;flex-direction:column;align-items:center;gap:6px}.gene-expression-colorbar-bar{width:14px;height:124px;border-radius:0;border:none}.gene-expression-colorbar-min,.gene-expression-colorbar-max{color:#304254;font-size:11px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;text-align:center}.gene-expression-view-message{position:absolute;inset:auto 18px 18px 18px;z-index:21;padding:10px 12px;background:#ffffffeb;border:1px solid rgba(226,72,72,.28);border-radius:10px;box-shadow:0 10px 24px #11182714;color:#8f1d1d;font-size:13px;line-height:1.45}.gene-expression-view-message.hidden{display:none}#app{width:100%;height:100%;position:relative}.viewer-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.viewer-canvas.is-dragging{cursor:grabbing}.viewer-message{position:absolute;top:18px;right:18px;max-width:min(360px,calc(100% - 36px));padding:10px 12px;background:#ffffffeb;border:1px solid rgba(226,72,72,.28);border-radius:10px;box-shadow:0 10px 24px #11182714;color:#8f1d1d;font-size:13px;line-height:1.45;z-index:4;pointer-events:none}#gui-container{--tp-base-background-color: hsla(40, 33%, 97%, .92);--tp-base-shadow-color: hsla(0, 0%, 0%, .2);--tp-button-background-color: hsla(0, 0%, 90%, 1);--tp-button-background-color-active: hsla(0, 0%, 80%, 1);--tp-button-foreground-color: hsla(0, 0%, 0%, .9);scrollbar-width:none;-ms-overflow-style:none}.loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#4a90e2;font-size:16px;display:flex;flex-direction:column;align-items:center}.loading-indicator:after{content:"";width:30px;height:30px;border:3px solid #f3f3f3;border-top:3px solid #4a90e2;border-radius:50%;animation:spin 1s linear infinite;margin-top:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cell-types-header{padding:8px 16px;margin:15px 0 10px;border-top:1px solid #eaeaea;background:var(--surface-light)}.cell-types-header h3{margin:0;font-size:14px;font-weight:600;color:#7e7b7b}@media screen and (max-width: 768px){#container{flex-direction:column}#sidebar{flex:0 0 auto;width:100%;max-height:40vh;border-right:none;border-bottom:1px solid #eaeaea}#viewer{flex:1 1 auto;height:60vh}.gene-expression-grid{gap:8px;padding:8px}.gene-expression-view-title{top:8px;max-width:calc(100% - 84px);font-size:14px}.gene-expression-colorbar{top:10px;left:10px}.gene-expression-colorbar-bar{height:100px}}#sample-gallery{position:fixed;bottom:0;left:0;right:0;background-color:#faf9f6f5;border-top:1px solid #e0e0e0;box-shadow:0 -2px 10px #0000001a;z-index:1000;padding:10px 0;max-height:0;overflow:hidden;transition:max-height .3s ease-in-out}#sample-gallery.visible{max-height:200px}.sample-gallery-header{display:flex;justify-content:space-between;align-items:center;padding:0 20px 10px;border-bottom:1px solid #eee}.sample-gallery-header h2{font-size:16px;font-weight:500;margin:0}.sample-gallery-container{display:flex;overflow-x:auto;padding:15px 20px;gap:15px;-webkit-overflow-scrolling:touch}.sample-gallery-container::-webkit-scrollbar{display:none}.sample-card{display:flex;flex-direction:column;align-items:center;min-width:140px;border-radius:6px;background:#fff;box-shadow:0 2px 4px #0000001a;padding:8px;cursor:pointer;transition:transform .2s,box-shadow .2s;border:2px solid transparent}.sample-card:hover{transform:translateY(-3px);box-shadow:0 4px 8px #00000026}.sample-card.active{border-color:#4285f4;background-color:#4285f40d}.sample-image{width:120px;height:80px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sample-image img{width:100%;height:100%;object-fit:cover}.sample-name{margin-top:8px;font-size:13px;font-weight:500;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.gallery-toggle{position:fixed;bottom:20px;left:50%;transform:translate(-50%);width:140px;height:36px;border-radius:18px;background-color:#4285f4;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0003;z-index:1001;transition:background-color .2s;font-weight:500;font-size:14px}.gallery-toggle:hover{background-color:#3367d6}.gallery-toggle i{margin-right:5px;font-size:16px;transition:transform .3s}.gallery-toggle.open i{transform:rotate(180deg)}.cell-types-section .tp-lblv_l{width:160px;min-width:160px;font-family:Arial,sans-serif;font-size:14px}.cell-types-section .tp-ckbv_w{margin-left:10px!important}.gene-expression-section .tp-lstv{width:112px;min-width:112px;max-width:112px;font-family:Arial,sans-serif;font-size:12px}.gene-expression-section .tp-lblv_l{width:74px!important;min-width:74px!important;font-family:Arial,sans-serif;font-size:12px;white-space:nowrap}.gene-expression-section .tp-lblv_v{min-width:0!important}.gene-expression-section .tp-sldv{max-width:80px}.gene-expression-section .is-disabled{opacity:.45;pointer-events:none}.gene-window-remove-button .tp-btnv_b{color:#8b2d2d!important}#colormap-preview{height:20px;width:100%;margin:8px 0 15px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.tp-rotv .tp-cntv #colormap-preview{margin-left:8px;margin-right:8px;width:calc(100% - 16px)}.tp-rotv{--tp-base-shadow-color: transparent !important;--tp-base-background-color: hsla(0, 0%, 100%, .95);--tp-base-foreground-color: hsla(0, 0%, 0%, .8);box-shadow:none!important;border:0px solid #e0e0e0;border-radius:0!important;padding:4px!important}.tp-rotv .tp-fldv{--tp-container-background-color: hsla(0, 0%, 100%, .98);border:1px dashed #f0f0f0;border-radius:0!important;box-shadow:none!important;padding:4px!important}.tp-rotv .tp-btnv{box-shadow:none!important;border:1px solid #e0e0e0;border-radius:8px!important}.tp-rotv .tp-txtv,.tp-rotv .tp-sldv,.tp-rotv .tp-coltxtv{box-shadow:none!important}#gui-container::-webkit-scrollbar,#gui-container .tp-rotv::-webkit-scrollbar,#gui-container .tp-fldv_c::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}#container{height:calc(100vh - var(--nav-height, 68px))}@media screen and (max-width: 768px){#container{height:calc(100vh - var(--nav-mobile-height, 132px))}}body.dark-mode .gene-expression-view{background:#000;border-color:#5e6775e6}body.dark-mode .gene-expression-view-title{color:#eef5fb;text-shadow:0 1px 2px rgba(0,0,0,.7)}body.dark-mode .gene-expression-colorbar-gene,body.dark-mode .gene-expression-colorbar-min,body.dark-mode .gene-expression-colorbar-max{color:#eef5fb}body.dark-mode .gene-expression-view-message{background:#121212eb;border-color:#e2484859;color:#ffd8d8}
