:root{--bg-color: #008080;--win-gray: #c0c0c0;--win-gray-light: #dfdfdf;--win-gray-dark: #808080;--win-black: #000000;--win-white: #ffffff;--win-blue: #000080;--font-main: "Tahoma", "Arial", sans-serif}body{background-color:var(--bg-color);font-family:var(--font-main);margin:0;padding:0;overflow:hidden;height:100vh;-webkit-user-select:none;user-select:none}h1,h2,h3,h4,h5,h6{margin:0;font-weight:700}.window{background-color:var(--win-gray);border-top:2px solid var(--win-gray-light);border-left:2px solid var(--win-gray-light);border-right:2px solid var(--win-gray-dark);border-bottom:2px solid var(--win-black);box-shadow:1px 1px 0 var(--win-black);padding:2px;position:absolute;display:flex;flex-direction:column;min-width:200px}.title-bar{background:linear-gradient(90deg,var(--win-blue),#1084d0);padding:3px 2px;display:flex;justify-content:space-between;align-items:center;color:var(--win-white);font-weight:700;font-size:13px;cursor:default}.title-bar.active{background:linear-gradient(90deg,var(--win-blue),#1084d0)}.title-bar.inactive{background:var(--win-gray-dark)}.title-bar-text{margin-left:4px;display:flex;align-items:center;gap:5px}.title-bar-controls{display:flex;gap:2px}.title-bar-btn{width:16px;height:14px;background-color:var(--win-gray);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-black);border-bottom:1px solid var(--win-black);display:flex;justify-content:center;align-items:center;font-size:10px;color:var(--win-black);cursor:pointer}.title-bar-btn:active{border-top:1px solid var(--win-black);border-left:1px solid var(--win-black);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);padding-top:1px;padding-left:1px}.window-body{margin-top:2px;padding:10px;flex-grow:1}.menu-bar{display:flex;gap:10px;padding:2px 5px;margin-bottom:5px;border-bottom:1px solid var(--win-gray-dark);box-shadow:0 1px 0 var(--win-white)}.menu-item{cursor:pointer}.menu-item:hover{background-color:var(--win-blue);color:var(--win-white)}button{background-color:var(--win-gray);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-black);border-bottom:1px solid var(--win-black);padding:4px 10px;font-family:var(--font-main);font-size:12px;cursor:pointer;min-width:75px}button:active{border-top:1px solid var(--win-black);border-left:1px solid var(--win-black);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);padding-top:5px;padding-left:11px}input[type=text],input[type=email],input[type=password],textarea{border-top:1px solid var(--win-gray-dark);border-left:1px solid var(--win-gray-dark);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);background-color:var(--win-white);padding:3px;font-family:var(--font-main);font-size:12px;outline:none;box-shadow:inset 1px 1px 0 var(--win-black),1px 1px 0 var(--win-white)}.hidden{display:none!important}.flex-row{display:flex;gap:10px;align-items:center}.flex-col{display:flex;flex-direction:column;gap:10px}.status-bar{border-top:1px solid var(--win-gray-dark);border-left:1px solid var(--win-gray-dark);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);padding:2px 5px;margin-top:5px;font-size:11px;color:var(--win-black);box-shadow:inset 1px 1px 0 var(--win-black)}#desktop{position:relative;width:100%;height:100%}.desktop-icon{width:64px;height:64px;display:flex;flex-direction:column;align-items:center;margin:10px;cursor:pointer;color:#fff;text-shadow:1px 1px 0 black;font-size:12px;text-align:center}.desktop-icon img{width:32px;height:32px;margin-bottom:5px}.desktop-icon:active img{filter:brightness(.5)}#login-screen{display:flex;justify-content:center;align-items:center;height:100vh;background-color:var(--bg-color)}.login-form{display:flex;flex-direction:column;gap:15px}.form-group{display:flex;flex-direction:column;gap:5px}.data-grid{background-color:var(--win-white);border:2px solid var(--win-gray-dark);border-right-color:var(--win-white);border-bottom-color:var(--win-white);width:100%;height:200px;overflow-y:scroll}.grid-header{display:flex;background-color:var(--win-gray);border-bottom:1px solid var(--win-black)}.grid-col{padding:2px 5px;border-right:1px solid var(--win-gray-dark);font-size:12px;font-weight:700}.grid-row{display:flex;cursor:pointer}.grid-row:hover{background-color:var(--win-blue);color:var(--win-white)}.grid-cell{padding:2px 5px;font-size:12px;border-right:1px solid #eee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.builder-container{display:flex;height:calc(100% - 30px);gap:2px}.builder-sidebar{width:180px;background-color:var(--win-gray);border-right:2px solid var(--win-gray-dark);padding:5px;overflow-y:auto}.builder-canvas-area{flex:1;display:flex;flex-direction:column;background-color:gray;padding:10px;overflow:auto}.builder-canvas{background-color:#fff;min-height:400px;border:2px solid var(--win-black);position:relative;padding:10px}.builder-properties{width:250px;background-color:var(--win-gray);border-left:2px solid var(--win-gray-dark);padding:10px;overflow-y:auto}.component-palette{margin-bottom:10px}.palette-title{font-weight:700;margin-bottom:5px;padding:2px;background-color:var(--win-blue);color:#fff;font-size:11px}.component-item{background-color:var(--win-gray);border:1px solid var(--win-gray-dark);padding:8px;margin-bottom:3px;cursor:grab;font-size:11px;display:flex;align-items:center;gap:5px}.component-item:active{cursor:grabbing}.component-item:hover{background-color:var(--win-gray-light)}.canvas-element{position:relative;cursor:pointer;min-height:30px;border:2px dashed transparent;padding:5px;margin:5px 0}.canvas-element:hover{border-color:#00f}.canvas-element.selected{border-color:red;background-color:#ff00000d}.canvas-element.dragging{opacity:.5}.element-group{border:1px solid #ccc;padding:10px;min-height:50px}.element-group.layout-row{display:flex;flex-direction:row;gap:10px;align-items:flex-start}.element-group.layout-column{display:flex;flex-direction:column;gap:10px}.element-group.drop-active{background-color:#0000ff1a;border:2px dashed #0000ff!important}.prop-group{margin-bottom:15px}.prop-label{font-size:11px;font-weight:700;margin-bottom:3px;display:block}.prop-input{width:100%;margin-bottom:5px}.prop-select{width:100%;padding:2px;font-family:var(--font-main);font-size:11px}.prop-color{width:100%;height:25px;cursor:pointer}.prop-buttons{display:flex;gap:5px;margin-top:10px}.prop-buttons button{flex:1;font-size:10px;min-width:0}.builder-toolbar{background-color:var(--win-gray);padding:5px;border-bottom:2px solid var(--win-gray-dark);display:flex;gap:5px}.builder-toolbar button{font-size:11px;padding:3px 8px}.drop-zone{border:2px dashed #0000ff;background-color:#0000ff1a;min-height:40px;display:flex;align-items:center;justify-content:center;color:#00f;font-size:11px}.canvas-empty{display:flex;align-items:center;justify-content:center;height:100%;color:gray;font-size:12px;text-align:center;padding:20px}