body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#222;color:#eee}.container{display:flex;height:100vh;overflow:hidden}.drawer{width:0;min-width:0;background:#333;color:#eee;display:flex;flex-direction:column;height:100vh;position:relative;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;z-index:3;box-shadow:2px 0 16px #0000002e;border-right:1.5px solid #222}.drawer:not(.open):not(.pinned){width:0;min-width:0}.drawer.open,.drawer.pinned{width:300px;min-width:300px}.drawer.closed{width:0}.drawer.closed .drawer-content,.drawer.closed .drawer-pin{display:none}.drawer-toggle{position:relative;left:0;top:0;z-index:20;width:44px;height:44px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:2em;background:#232323;color:#fff;border-radius:8px;box-shadow:2px 0 8px #0000001a;border:1.5px solid #444;cursor:pointer;transition:background .2s;margin-right:12px;outline:none;border-right:none}.drawer-toggle:focus{outline:2px solid #3a7bd5}.drawer-toggle:hover{background:#3a7bd5;color:#fff}#canvas-info{display:flex;align-items:center;min-height:44px}.drawer-content{background:linear-gradient(135deg,#353535 80%,#232323);border-radius:0 18px 18px 0;box-shadow:0 2px 12px #0000001a;margin:10px 0;padding:28px 20px 20px;flex-grow:1;overflow-y:auto;height:calc(100vh - 40px);box-sizing:border-box}.drawer-content label{display:flex;align-items:center;margin-top:14px;margin-bottom:8px;font-size:1.05em;color:#e0e0e0;font-weight:500}.drawer-content label input[type=color]{margin-left:8px}.drawer-content input,.drawer-content select{width:100%;padding:7px 10px;border-radius:7px;border:1px solid #444;background:#232323;color:#eee;margin-bottom:8px;font-size:1em;box-sizing:border-box;outline:none;transition:border .2s}.drawer-content input:focus,.drawer-content select:focus{border:1.5px solid #5af}.drawer-content hr{border:none;border-top:1.5px solid #444;margin:18px 0}.drawer-content button{width:100%;margin:8px 0;padding:10px 0;border-radius:8px;border:none;background:linear-gradient(90deg,#3a7bd5,#00d2ff);color:#fff;font-weight:600;font-size:1.08em;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:background .2s,box-shadow .2s}.drawer-content button:hover{background:linear-gradient(90deg,#00d2ff,#3a7bd5);box-shadow:0 4px 16px #0000002e}.drawer-pin{display:none;position:absolute;right:12px;top:12px;z-index:20;width:36px;height:36px;align-items:center;justify-content:center;font-size:1.5em;background:#232323;color:#fff;border-radius:8px;box-shadow:2px 0 8px #0000001a;border:1.5px solid #444;cursor:pointer;transition:background .2s}.drawer.open .drawer-pin,.drawer.pinned .drawer-pin{display:flex!important}.drawer-pin.pinned{background:#3a7bd5;color:#fff}.main-content-area{flex:3;display:flex;flex-direction:column;background:#111;overflow:auto;box-sizing:border-box;max-height:100vh;overflow-y:auto}.toolbar{display:flex;align-items:center;background:#222;padding:10px;box-shadow:0 2px 5px #00000080;z-index:1}.toolbar label{margin-right:10px}.toolbar input[type=color],.toolbar input[type=number]{margin-right:20px}.tool-button,.toolbar button{border-radius:7px;background:linear-gradient(90deg,#232323 60%,#353535);color:#e0e0e0;border:1.5px solid #444;font-weight:500;font-size:1em;padding:7px 16px;margin-right:10px;box-shadow:0 1px 4px #00000014;transition:background .2s,color .2s,border .2s}.tool-button.active,.toolbar button.active{background:linear-gradient(90deg,#3a7bd5,#00d2ff);color:#fff;border:1.5px solid #3a7bd5}.tool-button:hover,.toolbar button:hover{background:#444;color:#fff;border:1.5px solid #00d2ff}.canvas-wrapper{flex:1;display:flex;align-items:flex-start;justify-content:flex-start;padding:50px;box-sizing:border-box;max-height:70vh;overflow:auto}#lcd-canvas{background:#000;border:2px solid #444;border-radius:8px}#canvas-info{background:#232323;color:#b0e0ff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:12px 18px;margin:18px 0 10px;font-size:1.08em;display:flex;gap:24px;align-items:center;justify-content:flex-start;min-height:44px}#canvas-info span{margin-right:18px;font-weight:500}h2{margin-top:0}#loading-indicator{display:none;color:#eee;font-size:1.2em;text-align:center;width:100%;margin:16px 0}#toolbar-brush-info{display:inline-block;margin-left:8px;padding:4px 8px;border:1.5px solid #444;background:#222;border-radius:4px;vertical-align:middle;font-size:.9em;color:#ccc}.color-picker{position:absolute;background-color:#333;border:1px solid #555;padding:5px;display:none;z-index:1000;box-shadow:0 2px 5px #0003;flex-wrap:wrap;width:auto;max-width:150px}.color-swatch{width:20px;height:20px;margin:3px;border:1px solid #777;cursor:pointer;display:inline-block;box-sizing:border-box}.color-swatch:hover{border-color:#fff}input[type=color]{width:40px;height:24px;padding:2px;border:1px solid #555;border-radius:4px;vertical-align:middle}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#2c2c2c;color:#f0f0f0;margin:15% auto;padding:20px;border:1px solid #888;width:80%;max-width:500px;border-radius:8px;box-shadow:0 4px 8px #0003,0 6px 20px #00000030}.modal-content label{display:block;margin-top:10px;margin-bottom:5px}.modal-content select,.modal-content input[type=text],.modal-content input[type=number],.modal-content input[type=color]{width:calc(100% - 22px);padding:10px;margin-bottom:10px;border:1px solid #555;background-color:#333;color:#f0f0f0;border-radius:4px;box-sizing:border-box}.modal-content input[type=color]{height:38px;padding:2px}.close-button{color:#aaa;float:right;font-size:28px;font-weight:700}.close-button:hover,.close-button:focus{color:#fff;text-decoration:none;cursor:pointer}.modal-buttons{margin-top:20px;display:flex;justify-content:flex-end;gap:10px}.modal-buttons button{padding:10px 15px;border:none;border-radius:4px;cursor:pointer;background-color:#007bff;color:#fff}.modal-buttons button:hover{background-color:#0056b3}@media (max-width: 600px){.drawer.open,.drawer.pinned{width:100vw;min-width:100vw}.drawer-content{padding:16px 8px 8px;height:calc(100vh - 40px)}}