:root { --bg: #0a0a14; --section-bg: #1a1a2e; --accent: #00ffcc; }
body { margin:0; background:var(--bg); color:#eee; font-family:system-ui,sans-serif; overflow:hidden; height:100vh; }
header { padding:12px 20px; background:#111827; display:flex; gap:10px; flex-wrap:wrap; z-index:100; }
h1 { margin:0; color:var(--accent); }
.grid-stack { padding:20px; min-height:calc(100vh - 70px); background:var(--bg); }
.grid-stack-item-content { background:var(--section-bg); border:2px solid #445577; border-radius:10px; height:100%; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto; }
.section-header { background:#16213e; padding:10px 14px; cursor:move; user-select:none; display:flex; justify-content:space-between; align-items:center; }
.tings-grid { display:grid; gap:14px; padding:16px; flex:1; overflow:auto; }
.ting { pointer-events:auto; padding:12px; border-radius:8px; background:rgba(255,255,255,0.07); text-align:center; cursor:pointer; transition:all .2s; }
.ting:hover { transform:scale(1.12); background:rgba(0,255,204,0.2); }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:3000; display:none; align-items:center; justify-content:center; }
.overlay:not(.hidden) { display:flex; }
.overlay-content { width:92%; max-width:1150px; background:#111827; border-radius:12px; padding:15px; position:relative; }
#close-overlay { position:absolute; top:12px; right:20px; font-size:32px; background:none; border:none; color:white; cursor:pointer; }