Make HK sidebar menu clearly readable and structured

- Strong, obvious active state: accent-tinted background, bold text,
  accent icon and left accent border so the current section is unmistakable
- Inactive items stay fully readable (white on dark) with a clear hover
- Separate nav sections with dividers and bolder uppercase headers
- Fix invisible mobile hamburger hover (bg-black/10 -> accent tint)

src/app/admin/layout.tsx

@@ -201,10 +201,10 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
         </div>
       </div>
 
-      <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
-        {navGroups.map((group) => (
-          <div key={group.label}>
-            <div className="flex items-center gap-1.5 px-2 py-2 text-[0.6rem] font-bold uppercase tracking-[0.12em] text-[var(--admin-sidebar-muted-readable)]">
+      <nav className="flex-1 overflow-y-auto px-3 py-4">
+        {navGroups.map((group, gi) => (
+          <div key={group.label} className={gi > 0 ? "mt-4 pt-4 border-t border-[var(--admin-border)]" : ""}>
+            <div className="flex items-center gap-1.5 px-2 pb-2 text-[0.65rem] font-extrabold uppercase tracking-[0.14em] text-[var(--admin-sidebar-text-readable)] opacity-70">
               {group.icon}
               <span>{group.label}</span>
             </div>

src/components/admin/admin-mobile-wrapper.tsx

@@ -28,7 +28,7 @@ export function AdminMobileWrapper({
         <button
           type="button"
           onClick={() => setOpen(!open)}
-          className="flex items-center justify-center w-9 h-9 rounded-lg transition-colors hover:bg-black/10"
+          className="flex items-center justify-center w-9 h-9 rounded-lg transition-colors hover:bg-[var(--admin-accent)]/15"
           style={{ color: "var(--admin-text-muted)" }}
         >
           {open ? <X size={18} /> : <Menu size={18} />}

src/components/admin/admin-nav-link.tsx

@@ -25,20 +25,25 @@ export function AdminNavLink({
   return (
     <Link
       href={href}
-      className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
+      aria-current={active ? "page" : undefined}
+      className={`group flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm no-underline transition-all duration-150 ${
         active
-          ? "bg-[var(--admin-accent)]/15 text-[var(--admin-sidebar-text-readable)] shadow-sm border-l-2 border-[var(--admin-accent)]"
-          : "text-[var(--admin-sidebar-muted-readable)] hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
+          ? "bg-[var(--admin-accent)]/20 font-semibold text-[var(--admin-sidebar-text-readable)] border-l-2 border-[var(--admin-accent)] shadow-sm"
+          : "font-medium text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
       }`}
     >
       {icon ? (
         <span
-          className={`flex-none ${active ? "text-[var(--color-primary-readable)]" : "text-[var(--admin-sidebar-muted-readable)]"}`}
+          className={`flex-none transition-colors ${
+            active
+              ? "text-[var(--admin-accent)]"
+              : "text-[var(--admin-sidebar-text-readable)] opacity-75 group-hover:opacity-100"
+          }`}
         >
           {icon}
         </span>
       ) : null}
-      <span>{children}</span>
+      <span className="truncate">{children}</span>
     </Link>
   );
 }