#strath { background:var(--bg); position:relative; width:100%; height:100vh; overflow:hidden; margin:0 auto; transition: all 0.3s; }
        
/* Fullscreen Toggle Logic */
body:has(#fullscreen-toggle:checked) { background:var(--bd); margin:0; overflow:hidden; }
body:has(#fullscreen-toggle:checked) #strath {
    position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
    width:90vmin; height:90vmin; z-index:99999;
}

#fullscreen-toggle { z-index:20000 }

.layer { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none }
.shape-element { fill:transparent; pointer-events:auto; cursor:pointer; transition:fill 0.2s }
.shape-element:hover { fill:rgba(0,0,0,0.05) }

#menu, .status-icon { position:absolute; display:flex; align-items:center; justify-content:center; width:45px; height:45px; box-sizing:border-box; touch-action:none; cursor:move; z-index:15; background:transparent; }
#menu { border:3px solid var(--tx-muted); border-radius:50%; left:3%; top:3%; box-shadow:0 4px 15px rgba(0,0,0,0.2) }

.status-icon { z-index:14; width:5.5%; height:5.5% }
.status-icon[data-category="line"] { width:15%; height:15%; overflow:visible }
.status-icon[data-category="line"] svg { pointer-events: none; }
.line-hit-area, .line-handle, .line-obj { pointer-events: auto; }

.context-menu { position:absolute; display:none; min-width:100px; border-radius:8px; padding:5px 0; z-index:100; background:var(--bg); border:1px solid var(--tx-muted); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.context-menu div { position:relative; height:20px; padding:10px; cursor:pointer; font-size: 13px; display: flex; align-items: center; }
.context-menu div:hover { background:var(--bd) }

.sub-menu { position:absolute; display:none; grid-template-columns:repeat(3, 35px); grid-template-rows:repeat(3, 35px); left:50%; top:-20px; min-height:100px; border-radius:4px; padding:10px; width:max-content; z-index:101; background:var(--bg); border:1px solid var(--tx-muted) }
.context-menu div > .sub-menu { display:none }
.context-menu div:hover > .sub-menu { display:grid }
.grid-item { display:flex; width:35px; height:35px; align-items:center; justify-content:center; padding:0 !important; border:none !important }
.grid-item:hover { background:var(--bg) !important }

.line-handle { cursor:crosshair; pointer-events:auto; }
.line-handle:hover { r:7; }

/* Tooltip & Inputs */
#custom-tooltip { position:absolute; background:rgba(0,0,0,0.85); color:white; padding:8px 12px; border-radius:5px; font-size:12px; display:none; pointer-events:none; z-index:10000; line-height:1.4; }
.text-input-container { position:absolute; z-index:10001; background:white; border:2px solid var(--th); padding:2px; border-radius:4px; display:flex; box-shadow:0 2px 10px rgba(0,0,0,0.2); }
.text-input-container input { border:none; outline:none; padding:5px; font-size:14px; width:150px; }

/* Grid Text Wrap */
.grid-text-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 10px; color: #444; word-break: break-word; overflow-wrap: break-word; line-height: 1.1; pointer-events: none; }