.heatmap-layout{display:flex;min-height:100vh;background:linear-gradient(135deg,#0f0f1e,#1a1a2e)}.heatmap-container{flex:1;max-width:1600px;margin:0 auto;padding:1.5rem;min-height:100vh;color:#e0e0e0}.header-section{text-align:center;margin-bottom:2rem;padding:1.5rem 0;border-bottom:2px solid rgba(100,200,255,.2)}.title{font-size:2rem;font-weight:700;margin:0 0 .5rem;background:linear-gradient(135deg,#60d5fa,#a0f0b0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.subtitle{font-size:1rem;color:#a0a0b0;margin:0;font-weight:300}.metric-selector{margin-top:1.5rem;display:flex;align-items:center;justify-content:center;gap:1rem}.metric-selector>label,.metric-dropdown-wrapper>label{font-size:.9rem;font-weight:500;color:#b0b0c0}.metric-dropdown-wrapper{display:flex;flex-direction:column;align-items:center;gap:.4rem}.metric-dropdown-wrapper>label{display:flex;align-items:center;gap:.5rem}.metric-definition{font-size:.75rem;color:#808090;font-style:italic}.metric-dropdown{padding:.6rem 1.2rem;font-size:.9rem;border:2px solid rgba(100,200,255,.3);border-radius:8px;background-color:#1e1e2e;color:#e0e0e0;cursor:pointer;transition:all .3s ease;outline:none;min-width:250px;font-weight:500}.metric-dropdown:hover{border-color:#64c8ff99;background-color:#252535}.metric-dropdown:focus{border-color:#60d5fa;box-shadow:0 0 0 3px #60d5fa1a}.metric-dropdown option{background-color:#1e1e2e;color:#e0e0e0;padding:.5rem}.grid-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem 1rem;border:2px solid rgba(100,200,255,.3);border-radius:8px;background-color:#1e1e2e;transition:all .3s ease}.grid-toggle:hover{border-color:#64c8ff99;background-color:#252535}.grid-toggle input[type=checkbox]{width:16px;height:16px;accent-color:#60d5fa;cursor:pointer}.grid-wrapper{display:flex;justify-content:center;margin-bottom:1.5rem}.main-grid{display:grid;grid-template-columns:300px repeat(5,150px);grid-template-rows:repeat(7,60px) auto;background-color:#16161e;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0006}.corner-cell{background:linear-gradient(to bottom right,transparent 0%,transparent calc(50% - 1px),rgba(100,200,255,.3) calc(50% - 1px),rgba(100,200,255,.3) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%),linear-gradient(135deg,#1e1e2e,#2a2a3e);color:#909090;font-weight:600;padding:.8rem;position:relative;border-right:2px solid rgba(100,200,255,.2);font-size:.8rem;text-transform:uppercase;letter-spacing:.5px}.corner-cell-bottom{border-top:2px solid rgba(100,200,255,.2);border-bottom:none}.corner-level{position:absolute;top:.5rem;left:.8rem;color:#a0f0b0}.corner-tier{position:absolute;bottom:.5rem;right:.8rem;color:#60d5fa}.tier-header{background:linear-gradient(135deg,#1e1e3e,#2a2a4e);padding:1rem;text-align:center;font-weight:600;display:flex;flex-direction:column;justify-content:center;align-items:center}.tier-header-bottom{border-top:2px solid rgba(100,200,255,.2);border-bottom:none}.tier-id{font-size:1.1rem;color:#60d5fa;font-weight:700;margin-bottom:.3rem}.tier-name{font-size:.9rem;color:#a0a0b0;font-weight:400}.level-header{background:linear-gradient(135deg,#1e1e2e,#2a2a3e);padding:.7rem;text-align:center;border-right:2px solid rgba(100,200,255,.2);font-weight:600;display:flex;flex-direction:column;justify-content:center;align-items:center}.level-id{font-size:.9rem;color:#a0f0b0;font-weight:700;margin-bottom:.3rem}.level-name{font-size:.8rem;color:#909090;font-weight:400;line-height:1.3}.data-area{position:relative;overflow:hidden}.gradient-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.data-grid-overlay{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(7,1fr);width:100%;height:100%;z-index:1}.data-cell{background:transparent;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.data-grid-overlay.show-grid .data-cell{border:1px dotted rgba(255,255,255,.25)}.data-grid-overlay.hide-grid .data-cell{border:1px solid transparent}.data-cell:hover{background:#ffffff1a;box-shadow:inset 0 0 20px #60d5fa33;border-color:#60d5fa99!important}.legend{text-align:center;padding:1rem;background-color:#1e1e2e;border-radius:8px;border:1px solid rgba(100,200,255,.2)}.legend-title{font-size:.85rem;font-weight:600;color:#b0b0c0;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.legend-gradient{max-width:400px;margin:0 auto}.legend-labels{display:flex;justify-content:space-between;margin-bottom:.4rem;font-size:.8rem;color:#909090;font-weight:500}.gradient-bar{height:24px;background:linear-gradient(to right,#1e50c8,#5a41be,#9632b4,#b92d6e,#dc2828);border-radius:6px;box-shadow:0 2px 8px #0000004d;border:1px solid rgba(60,60,80,.4)}.placed-container{position:absolute;transform:translate(-50%,-50%);background:#16161ed9;border:2px solid rgba(100,200,255,.4);border-radius:8px;cursor:grab;z-index:10;min-width:90px;min-height:60px;box-shadow:0 4px 16px #00000080;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}.placed-container.resizable{transition:box-shadow .15s ease,border-color .15s ease}.placed-container:hover{box-shadow:0 6px 24px #0009;border-color:#64c8ffb3;z-index:20}.placed-container:active{cursor:grabbing}.container-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.4rem;width:100%;height:100%;box-sizing:border-box}.placed-container-name{display:block;font-size:.75rem;font-weight:600;color:#e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:.3rem;text-align:center}.container-value{font-size:.7rem;color:#a0a0b0;margin-top:.2rem}.resize-handle{position:absolute;background:#64c8ff99;border-radius:2px;opacity:0;transition:opacity .2s ease}.placed-container:hover .resize-handle{opacity:1}.resize-n,.resize-s{left:20%;right:20%;height:6px;cursor:ns-resize}.resize-n{top:-3px}.resize-s{bottom:-3px}.resize-e,.resize-w{top:20%;bottom:20%;width:6px;cursor:ew-resize}.resize-e{right:-3px}.resize-w{left:-3px}.resize-ne,.resize-nw,.resize-se,.resize-sw{width:10px;height:10px;border-radius:50%;background:#64c8ffcc}.resize-ne{top:-5px;right:-5px;cursor:nesw-resize}.resize-nw{top:-5px;left:-5px;cursor:nwse-resize}.resize-se{bottom:-5px;right:-5px;cursor:nwse-resize}.resize-sw{bottom:-5px;left:-5px;cursor:nesw-resize}.container-gradient-bar{position:relative;width:80%;max-width:100px;height:6px;background:linear-gradient(to right,#1e50c8,#5a41be,#9632b4,#b92d6e,#dc2828);border-radius:3px;overflow:visible}.container-gradient-indicator{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:#fff;border:2px solid #1a1a2e;border-radius:50%;box-shadow:0 0 6px #fff9,0 2px 4px #0006}@media (max-width: 1200px){.heatmap-container{padding:1.5rem}.title{font-size:2rem}.main-grid{grid-template-columns:250px repeat(5,130px)}}@media (max-width: 900px){.heatmap-layout{flex-direction:column}}@media (max-width: 768px){.heatmap-container{padding:1rem}.title{font-size:1.5rem}.subtitle{font-size:.95rem}.metric-selector{flex-direction:column;gap:.5rem}.metric-dropdown{min-width:100%}.main-grid{grid-template-columns:200px repeat(5,100px);grid-template-rows:repeat(7,50px) auto}.tier-id,.level-id{font-size:.9rem}.tier-name,.level-name{font-size:.75rem}}.custom-tooltip{position:fixed;transform:translate(-50%,-100%);background:linear-gradient(135deg,#1e1e3e,#2a2a4e);border:2px solid rgba(100,200,255,.4);border-radius:8px;padding:.75rem 1rem;pointer-events:none;z-index:1000;box-shadow:0 8px 24px #0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:tooltipFadeIn .2s ease-out;min-width:200px}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%,-100%) translateY(5px)}to{opacity:1;transform:translate(-50%,-100%) translateY(0)}}.tooltip-location{font-size:.9rem;font-weight:600;color:#e0e0e0;text-align:center}.footer{text-align:center;padding:2rem 0;margin-top:2rem;border-top:1px solid rgba(100,200,255,.2)}.footer p{margin:0;font-size:.85rem;color:#909090;font-weight:400}.grid-wrapper::-webkit-scrollbar{height:10px}.grid-wrapper::-webkit-scrollbar-track{background:#1a1a2e;border-radius:5px}.grid-wrapper::-webkit-scrollbar-thumb{background:#64c8ff4d;border-radius:5px}.grid-wrapper::-webkit-scrollbar-thumb:hover{background:#64c8ff80}.container-sidebar{width:280px;min-width:280px;background:linear-gradient(180deg,#1a1a2e,#16161e);border-right:2px solid rgba(100,200,255,.2);padding:1.5rem;display:flex;flex-direction:column;height:100vh;overflow-y:auto}.sidebar-title{font-size:1.2rem;font-weight:600;margin:0 0 1.5rem;color:#e0e0e0;background:linear-gradient(135deg,#60d5fa,#a0f0b0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.add-container-form{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(100,200,255,.2)}.container-name-input{padding:.6rem .8rem;font-size:.85rem;border:2px solid rgba(100,200,255,.3);border-radius:6px;background-color:#1e1e2e;color:#e0e0e0;outline:none;transition:border-color .2s ease}.container-name-input:focus{border-color:#60d5fa}.container-name-input::placeholder{color:#606070}.add-container-btn{padding:.6rem 1rem;font-size:.85rem;font-weight:600;border:none;border-radius:6px;background:linear-gradient(135deg,#3a7ca5,#2c5f7c);color:#e0e0e0;cursor:pointer;transition:all .2s ease}.add-container-btn:hover{background:linear-gradient(135deg,#4a8cb5,#3c6f8c);transform:translateY(-1px)}.add-container-btn:active{transform:translateY(0)}.container-list{flex:1;display:flex;flex-direction:column;gap:.5rem}.empty-message{color:#606070;font-size:.85rem;text-align:center;padding:1rem}.container-item{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background-color:#1e1e2e;border:2px solid rgba(100,200,255,.2);border-radius:8px;cursor:grab;transition:all .2s ease}.container-item:hover{border-color:#64c8ff80;background-color:#252535}.container-item:active{cursor:grabbing}.container-item.placed{border-color:#a0f0b066;background-color:#a0f0b01a}.drag-handle{display:flex;align-items:center;color:#606070;transition:color .2s ease}.container-item:hover .drag-handle{color:#60d5fa}.drag-icon{font-size:1rem;line-height:1}.container-info{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0}.container-name{font-size:.9rem;font-weight:500;color:#e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-container-btn{padding:.2rem .5rem;font-size:1.1rem;font-weight:400;line-height:1;border:none;border-radius:4px;background:transparent;color:#606070;cursor:pointer;transition:all .2s ease}.remove-container-btn:hover{background-color:#ff646433;color:#ff6b6b}.sidebar-help{margin-top:auto;padding-top:1rem;border-top:1px solid rgba(100,200,255,.2)}.help-toggle-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.5rem .8rem;font-size:.8rem;font-weight:500;border:1px solid rgba(100,200,255,.25);border-radius:6px;background:#64c8ff14;color:#60d5fa;cursor:pointer;transition:all .2s ease}.help-toggle-btn:hover{background:#64c8ff26;border-color:#64c8ff66}.help-chevron{font-size:.65rem;transition:transform .2s ease;display:inline-block}.help-chevron.open{transform:rotate(180deg)}.help-content{margin-top:.75rem;display:flex;flex-direction:column;gap:.6rem}.help-section h4{font-size:.75rem;font-weight:600;color:#a0f0b0;margin:0 0 .2rem;text-transform:uppercase;letter-spacing:.3px}.help-section p{font-size:.75rem;color:#808090;margin:0;line-height:1.4;text-align:left}.container-sidebar::-webkit-scrollbar{width:6px}.container-sidebar::-webkit-scrollbar-track{background:#1a1a2e}.container-sidebar::-webkit-scrollbar-thumb{background:#64c8ff4d;border-radius:3px}.container-sidebar::-webkit-scrollbar-thumb:hover{background:#64c8ff80}@media (max-width: 1200px){.container-sidebar{width:240px;min-width:240px;padding:1rem}}@media (max-width: 900px){.container-sidebar{width:100%;min-width:unset;height:auto;max-height:250px;border-right:none;border-bottom:2px solid rgba(100,200,255,.2)}.container-list{flex-direction:row;flex-wrap:wrap}.container-item{flex:0 0 auto}}.App{width:100%;min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#0f0f1e;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#0f0f1e,#1a1a2e)}#root{width:100%;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;background-color:#1a1a1a;padding:2px 6px;border-radius:4px}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0f0f1e}::-webkit-scrollbar-thumb{background:#64c8ff4d;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#64c8ff80}