*{box-sizing:border-box;margin:0;padding:0;user-select:none}body{font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#000;color:#fff;letter-spacing:.5px}#app{width:100vw;min-height:100vh;display:flex;flex-direction:column}.container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.header{padding:20px;background-color:#000;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center}.header h1{font-size:24px}.info{display:flex;gap:15px;font-size:14px;color:#aaa;align-items:center}.sector-compass{display:flex;align-items:center;justify-content:center;padding:0 10px}#sector-canvas{display:block;image-rendering:crisp-edges}canvas{flex:1;display:block;background-color:#000}.construction-menu{position:absolute;top:80px;left:50%;transform:translate(-50%);min-width:1050px;display:flex;flex-direction:column;z-index:1000}.construction-menu.hidden{display:none}.menu-tabs{display:flex;gap:12px;background-color:#111;padding:12px 12px 0;border-radius:8px 8px 0 0}.menu-tab{padding:8px 12px;background:none;border:none;color:#888;cursor:pointer;font-size:12px;text-transform:uppercase;transition:all .2s}.menu-tab:hover{color:#fff}.menu-tab.active{color:#0c4;border-bottom:2px solid #00cc44}.menu-content{padding:12px;overflow:hidden;background-color:#111;border-radius:0 0 8px 8px}.buildings-list{display:flex;flex-direction:row;gap:12px;flex-wrap:wrap}.building-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;border:1px solid #444;border-radius:4px;transition:all .2s;text-align:center;flex-shrink:0;padding:0 12px;height:40px}.building-item:hover{border-color:#666;background-color:#ffffff0d}.building-item.selected{background-color:#0c4;border-color:#0c4}.building-item.selected .building-name,.building-item.selected .building-size{color:#000}.building-color{display:none}.building-info{display:flex;flex-direction:column;gap:4px;width:100%}.building-name{font-weight:600;font-size:11px;color:#fff}.building-size{font-size:10px;color:#888}.confirmation-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.confirmation-modal.hidden{display:none}.confirmation-content{background-color:#111;border:1px solid #333;border-radius:8px;padding:24px;min-width:450px;max-width:90vw;box-shadow:0 4px 16px #00000080}.confirmation-content h2{font-size:18px;margin:0 0 12px;color:#fff}.confirmation-content p{font-size:14px;color:#aaa;margin:0 0 20px}.confirmation-buttons{display:flex;gap:12px;justify-content:flex-end}.confirm-button{padding:8px 16px;border:1px solid #444;border-radius:4px;background-color:#222;color:#fff;cursor:pointer;font-size:12px;transition:all .2s}.confirm-button:hover{background-color:#333;border-color:#666}.confirm-yes{background-color:#0c4;border-color:#0c4;color:#000}.confirm-yes:hover{background-color:#0d5;border-color:#0d5}.confirm-no{background-color:#c00;border-color:#c00;color:#fff}.confirm-no:hover{background-color:#d00;border-color:#d00}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.modal.hidden{display:none}.modal-content{background-color:#111;border:1px solid #333;border-radius:8px;padding:24px;min-width:550px;max-width:90vw;box-shadow:0 4px 16px #00000080}.modal-content h2{font-size:18px;margin:0 0 20px;color:#fff}#layout-name-input{width:100%;padding:10px 12px;margin-bottom:20px;border:1px solid #444;border-radius:4px;background-color:#1a1a1a;color:#fff;font-size:14px;transition:all .2s}#layout-name-input:focus{outline:none;border-color:#0c4;background-color:#222}#layout-name-input::placeholder{color:#666}#layouts-list{max-height:400px;overflow-y:auto;margin-bottom:20px}.layout-item{padding:12px;margin-bottom:8px;border:1px solid #333;border-radius:4px;background-color:#1a1a1a;display:flex;justify-content:space-between;align-items:center;gap:12px}.layout-item:hover{background-color:#222;border-color:#444}.layout-info{flex:1;display:flex;flex-direction:column;gap:4px}.layout-name{font-weight:600;font-size:14px;color:#fff}.layout-date{font-size:12px;color:#888}.layout-actions{display:flex;gap:8px}.layout-button{padding:6px 12px;border:1px solid #444;border-radius:4px;background-color:#222;color:#fff;cursor:pointer;font-size:12px;transition:all .2s}.layout-button:hover{background-color:#333;border-color:#666}.layout-load{background-color:#0c4;border-color:#0c4;color:#000}.layout-load:hover{background-color:#0d5;border-color:#0d5}.layout-delete{background-color:#c00;border-color:#c00;color:#fff}.layout-delete:hover{background-color:#d00;border-color:#d00}.layout-export{background-color:#4a90e2;border-color:#4a90e2;color:#fff}.layout-export:hover{background-color:#5a9ff5;border-color:#5a9ff5}.layout-item.repository{border:2px solid #4a90e2;background:#4a90e21a}.layout-section-header{font-weight:700;margin:16px 0 8px;color:#888;text-transform:uppercase;font-size:12px}.layout-preview-tooltip{position:fixed;background:#2a2a2a;border:2px solid #4a90e2;padding:6px;border-radius:4px;pointer-events:none;z-index:10000;box-shadow:0 4px 12px #00000080;margin-right:20px;max-width:calc(100vw - 20px)}.layout-preview-tooltip img{display:block;image-rendering:pixelated;max-width:360px;height:auto}.empty-message{text-align:center;color:#888;padding:20px;font-size:14px}.modal-buttons{display:flex;gap:12px;justify-content:flex-end}.modal-button{padding:8px 16px;border:1px solid #444;border-radius:4px;background-color:#222;color:#fff;cursor:pointer;font-size:12px;transition:all .2s}.modal-button:hover{background-color:#333;border-color:#666}.modal-confirm{background-color:#0c4;border-color:#0c4;color:#000}.modal-confirm:hover{background-color:#0d5;border-color:#0d5}.modal-cancel{background-color:#c00;border-color:#c00;color:#fff}.modal-cancel:hover{background-color:#d00;border-color:#d00}.shortcuts-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000d9;display:flex;align-items:center;justify-content:center;z-index:3000}.shortcuts-modal.hidden{display:none}.shortcuts-modal-content{background-color:#111;border:1px solid #333;border-radius:12px;padding:24px;max-width:95vw;box-shadow:0 8px 32px #0009}.shortcuts-header{display:flex;justify-content:center;margin-bottom:16px}.shortcuts-title{font-size:20px;font-weight:600;color:#fff}.keyboard-container{display:flex;flex-direction:column;gap:8px;align-items:center;padding:20px 0;user-select:none;transform:scale(.9)}.keyboard-row{display:flex;gap:6px;width:100%;justify-content:space-between}.keyboard-row:first-child{justify-content:flex-start;padding-left:0}.key{width:40px;height:40px;background:#1a1a1a;color:#666;border:1px solid #333;border-radius:6px;display:flex;justify-content:center;align-items:center;font-family:inherit;font-size:.8rem;box-shadow:0 4px #222;position:relative;transition:all .1s ease;cursor:default;opacity:.7}.key.tab{width:60px;align-items:flex-start;padding-left:8px}.key.caps{width:70px;align-items:flex-start;padding-left:8px}.key.shift{width:95px;align-items:flex-start;padding-left:8px}.key.enter{width:85px;align-items:flex-end;padding-right:8px}.key.backspace{width:60px}.key.space{width:250px}.key.ctrl,.key.alt,.key.command{width:50px;font-size:.7rem}.key.arrow-key{width:40px;height:20px;min-width:40px}.key-spacer{width:24px}.arrow-cluster{display:flex;flex-direction:column;gap:2px}.arrow-row-top{display:flex;justify-content:center}.arrow-row-bottom{display:flex;gap:6px}.key.active-key{background:#0c4;color:#000;border-color:#0a3;box-shadow:0 4px #082;opacity:1;font-weight:700;cursor:default;z-index:2}.key.active-key:after{content:attr(data-action);position:absolute;bottom:125%;left:50%;transform:translate(-50%) scale(0);padding:8px 14px;background:#f0f0f0;color:#0a3;border:1px solid rgba(0,204,68,.3);border-radius:8px;font-size:.85rem;font-weight:600;white-space:nowrap;opacity:0;transition:all .2s cubic-bezier(.68,-.55,.265,1.55);pointer-events:none;box-shadow:0 4px 12px #00000026;z-index:10}.key.active-key:before{content:"";position:absolute;bottom:110%;left:50%;transform:translate(-50%) scale(0);border-width:6px;border-style:solid;border-color:#333 transparent transparent transparent;opacity:0;transition:all .2s cubic-bezier(.68,-.55,.265,1.55);z-index:10}.key.active-key:after,.key.active-key:before{opacity:1;transform:translate(-50%) scale(1);bottom:125%}.key[data-key=R]:after{transform:translate(-90%) scale(1)}.key[data-key=T]:after{transform:translate(-10%) scale(1)}.key[data-key=Q]:after{transform:translate(-70%) scale(1)}.key[data-key=E]:after{transform:translate(-30%) scale(1)}.keyboard-container:has(.active-key:hover,.active-key.simulated-hover) .key.active-key:not(:hover):not(.simulated-hover):after,.keyboard-container:has(.active-key:hover,.active-key.simulated-hover) .key.active-key:not(:hover):not(.simulated-hover):before{opacity:.2;filter:grayscale(.5) blur(1px)}.key.active-key.simulated-hover{transform:translateY(2px);box-shadow:0 2px #082}