@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
}
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
}
:root {
  --bg: #f4f4f4;
  --text: #111;
  --tile-bg: #fff;
  --menu-bg: #333;
  --menu-text: #fff;
}
body.dark {
  --bg: #121212;
  --text: #eee;
  --tile-bg: #1e1e1e;
  --menu-bg: #222;
  --menu-text: #eee;
}
#hoverZone {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  z-index: 1001;
}
#sideMenu {
  position: fixed;
  top: 0;
  left: -220px;
  width: 200px;
  height: 100%;
  background-color: var(--menu-bg);
  color: var(--menu-text);
  transition: left 0.3s ease;
  padding: 20px;
  box-shadow: 2px 0 8px rgba(0,0,0,0.3);
  z-index: 1000;
}
#sideMenu.visible {
  left: 0;
}
#sideMenu ul {
  list-style: none;
  padding: 0;
}
#sideMenu li {
  margin: 20px 0;
}
#sideMenu a {
  color: var(--menu-text);
  text-decoration: none;
  font-weight: 500;
}
#themeToggle, #editToggle {
  position: fixed;
  background: var(--tile-bg);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  z-index: 1002;
  font-size: 14px;
  font-weight: 500;
}
#themeToggle {
  top: 10px;
  right: 10px;
}
#editToggle {
  top: 50px;
  right: 10px;
}
#dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 100px auto;
  padding: 0 16px;
}
.tile {
  background-color: var(--tile-bg);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background 0.3s;
  user-select: none;
  font-size: 16px;
  font-weight: 500;
}
.tile[draggable="true"] {
  cursor: grab;
}
.tile[draggable="false"] {
  cursor: default;
}
.tile.dragging {
  opacity: 0.4;
}