:root {
  --primary: #2563EB;
  --bg: #F5F5F7;
  --card-bg: #FFFFFF;
  --text: #1F2937;
  --text-secondary: #6B7280;
  --border: #E5E7EB;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.main-content { min-height: calc(100vh - 56px - 88px); }

.tool-card { transition: transform .15s, box-shadow .15s; border-radius: 12px; }
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,.08) !important; }

.tool-item { transition: transform .15s; border-radius: 12px; }
.tool-item:hover { transform: translateY(-2px); }

.text-purple { color: #7F77DD; }
.bg-purple { background-color: #7F77DD; }

/* Admin Layout */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar { width: 220px; background: #1F2937; color: #E5E7EB; flex-shrink: 0; display: flex; flex-direction: column; }
.sidebar-logo { padding: 18px 20px; font-size: 17px; font-weight: 700; color: #fff; border-bottom: 1px solid #374151; }
.sidebar-nav { flex: 1; padding: 8px 0; }
.sidebar-item { display: flex; align-items: center; padding: 10px 20px; color: #9CA3AF; text-decoration: none; font-size: 14px; transition: .12s; }
.sidebar-item:hover, .sidebar-item.active { background: #374151; color: #fff; }
.sidebar-footer { padding: 16px 20px; border-top: 1px solid #374151; font-size: 13px; }
.admin-main { flex: 1; padding: 32px; background: var(--bg); overflow-y: auto; }
.admin-main h4 { font-size: 18px; margin-bottom: 20px; }

.cat-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); padding: 8px 0 4px; }

.toast-msg { position: fixed; top: 16px; right: 16px; background: #10B981; color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; z-index: 9999; }
.toast-err { background: #EF4444; }

@media (max-width: 768px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; padding: 8px; }
  .sidebar-logo { border-bottom: none; padding: 8px 12px; font-size: 15px; }
  .sidebar-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .sidebar-item { padding: 6px 12px; font-size: 12px; }
  .sidebar-footer { display: none; }
  .admin-main { padding: 16px; }
}